bumoo king
346
2022-01-10 13:18:40 작성 2022-01-10 13:27:01 수정됨
1
107

js /react 로 간단한 검색기능을 구현하는중.. 질문드립니다 .


includes 함수를통해서 문자열이 일치하면 일치한 데이터만 나오게 구현하는건 쉽게 되었습니다 .


구현을한후에 기능을 추가하기위해 첫글자와 마지막글자를 체크박스에 체크하면


state 를통해 스위치 역활의 onclcik 을 input 에 주고


state의 변화에 따라 작동하는 로직을 짜던중 잘장동이 안되서 코드어디를 수정해야 

원하는 결과를 얻을수있는지 조언을좀 부탁드립니다 .

아래 코드를 참고해주세요..

import React, { useState } from "react";
import "./App.css";
import JSONDATA from "./MOCK_DATA.json";
function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const [startString, setStartString] = useState(false);
  const [endString, setEndString] = useState(false);
  return (
    <div className="App">
      <label>{searchTerm}</label>
      <input
        type="text"
        placeholder="search . ."
        className="input-box"
        onChange={(e) => {
          setSearchTerm(e.target.value);
        }}
      />
      <label>firstString search
      <input type="checkbox" onClick={()=>{setStartString(true)}}></input>
      </label>
      <label>endString search
      <input type="checkbox" onClick={()=>{setEndString(true)}}></input>
      </label>
      {JSONDATA.filter((el) => {
         if (startString == true) {
          if (el.first_name.toLowerCase().startsWith(setSearchTerm.toLowerCase)) {
            return el;
          }
        } else if (endString == true) {
          if (el.first_name.toLowerCase().endsWith(setSearchTerm.toLowerCase)) {
            return el;
          }
        } else {
          if (searchTerm == "") {
            return el;
          } else if (
            el.first_name.toLowerCase().includes(searchTerm.toLowerCase())
          ) {
            return el;
          }
        }
      }).map((el, index) => {
        return (
          <div key={index}>
            <p>{el.first_name}</p>
          </div>
        );
      })}
    </div>
  );
}
0
  • 답변 1

  • bumoo king
    346
    2022-01-10 15:09:30

    해결했습니다.!

  • 로그인을 하시면 답변을 등록할 수 있습니다.