条件を満たす項目を表示

コード#コード#

import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);

  return (
    <div className="monsters">
      <SearchBox />
      <CardList monsters={monsters} />
    </div>
  );
}

export default Monsters;

コード成果物

Inputで検索すると一致するカードが表示されます!

ステップ1)inputからvalueを取得する

import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState(''); // input state 설정

  const updateUserInput = (e) => {
    setUserInput(e.target.value); // input value
  };

  return (
    <div className="monsters">
      <SearchBox handleChange={updateUserInput} />
      <CardList monsters={monsters} />
    </div>
  );
}

export default Monsters;

ステップ2)filterとinCloseでフィルタリング

import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState('');

  const updateUserInput = (e) => {
    setUserInput(e.target.value);
  };

  const sortedMonster = monsters.filter((monster) => {
    return monster.name.includes(userInput); // filter & Includes 함수 활용
  });

  return (
    <div className="monsters">
      <SearchBox handleChange={updateUserInput} />
      <CardList monsters={sortedMonster} /> // 검색 결과를 prop으로 전달
    </div>
  );
}

export default Monsters;

手順3)検索が簡単で、すべて小文字で

import React, { useState, useEffect } from 'react';
import SearchBox from './Components/SearchBox/SearchBox';
import CardList from './Components/CardList/CardList';
import './Monsters.scss';

function Monsters() {
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((data) => setMonsters(data));
  }, []);

  const [monsters, setMonsters] = useState([]);
  const [userInput, setUserInput] = useState('');

  const updateUserInput = (e) => {
    setUserInput(e.target.value);
  };

  const sortedMonster = monsters.filter((monster) => {
    return monster.name.toLowerCase().includes(userInput.toLowerCase());
  });    // toLowerCase() 활용

  return (
    <div className="monsters">
      <SearchBox handleChange={updateUserInput} />
      <CardList monsters={sortedMonster} />
    </div>
  );
}

export default Monsters;

結果