如何让工作搜索栏通过组件传递道具？

Question

I want to filter data and implement in search bar. In Hook/index.js component I am fetching and filtering data inside useEffects . Then I am passing props in App.js . Afterwards I have a Searchbar component, where I am listening to the input and here it must work. I get undefined .

Hook/index.js component

import React, { useState, useEffect } from "react";

import "./hook.scss";

export default () => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [search, setSearch] = useState("");

  const fetchData = () => {
    fetch("https://restcountries.eu/rest/v2/all")
      .then((res) => res.json())
      .then((result) => setData(result))
      .catch((err) => console.log("error"));
  };

  useEffect(() => {
    const searchResult =
      data && data.filter((item) => item.name.toLowerCase().includes(search));
    setSearch(searchResult);
  }, []);

  useEffect(() => {
    fetchData();
  }, []);

  return [data, error];
};

App.js

import React, { useState }from "react";
import Header from "./components/Header";
import SearchBar from "./components/SearchBar";
import Flag from "./components/Flag";
import useCountries from "./Hooks";
import CountryList from "./components/CountryList";



import "./App.scss";

export default function App()  {
  const [data, error] = useCountries();

  
  return (
    <div className="App">
      <SearchBar />  //   {/*this throws an error <SearchBar data={data}/> */}
      <Header />
      {data &&
        data.map((country) => (
          <div className="CountryList" key={country.name}>
            <Flag flag={country.flag} />
            <CountryList
              population={country.population}
              name={country.name}
              region={country.region}
            />
            {country.languages.map((language, languageIndex) => (
              <CountryList key={languageIndex} language={language.name} />
            ))}
           
          </div>
        ))}
      <useCountries />
    </div>
  );
  return [data, error]
}

Searchbar component

import React, {useState} from "react";


import "./SearchBar.scss";

export default function SearchBar({data}) {
    const [search, setSearch] = useState("");

   function handleChange(e) {
    setSearch(e.target.value);
  } 
  return (
    <div className="SearchBar">
      <input
        className="input"
        type="text"
        placeholder="search country ..."
        value={data}
        onChange={handleChange}
      />

      {data && data.filter((item) => item.name.toLowerCase().includes(search))}
    </div>
  );
};

Answer 1

You are sending data variable to input instead of search variable.

In JS filter return array and DOM cannot display array since it is not html or jsx so you need to convert array to jsx with map. with map you can return array or jsx

   <div className="SearchBar">
        <input
           className="input"
           type="text"
           placeholder="search country ..."
           value={search} // change here 
           onChange={handleChange}
     />
     <ul>{(data || []).filter((item) => item.name.toLowerCase().includes(search)).map(e=>(<li key={e.name}>{e.name}</li>))}</ul> /change here
    </div>

Answer 2

Your new .filter() Array contains Objects inside it! You need to .map() it before return as Objects are not valid as a React child.

{ data?.filter((item) => item.name.toLowerCase().includes(search)).map((element => 
<>
 /* Your code goes here! */
</>) }

Explanation:

Array.prototype.filter() returns a new Array and in your case your Array is filled with Objects, like this:

{data && data.filter((item) => item.name.toLowerCase().includes(search))}
// The code above returns an Array just like below.

const array = [ {name: 'Brazil' /*...others properties*/}, {name: 'USA' /*...others properties*/}, {name: 'England' /*...others properties*/} ];

When you return array , React reject to mount your Objects, cus it can't understand what to do. That's why you map it, to have access to each Object inside it.