Breaking News: Grepper is joining You.com. Read the official announcement!

search in api react

Yafet Segid answered on July 27, 2022 Popularity 9/10 Helpfulness 3/10

answer search in api react

related search api in react js

search in api react

Comment

// Add Search in react from Api 
const [runData, setRunData] = useState([]);
  const [search, setSearch] = useState("");

  axios
    .get("https://www.anapioficeandfire.com/api/books?pageSize=30")
    .then((res) => setRunData(res.data))
    .then((err) => console.error(err));

// filter onChange
  const filterName = (e) => {
    setSearch(e.target.value);
  };

  return (
    <div className="App">
      <input text="text" onChange={filterName} placeholder="Search" />
    // add filter and if statement 
      {runData
        .filter((value) => {
          if (search === "") {
            return value;
          } else if (value.name.toLowerCase().includes(search.toLowerCase())) {
            return value;
          }
        })
        // 
        .map((list, index) => (
          <p key={index}> {list.name}</p>
        ))}
    </div>

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript search

Link to this answer
Share Copy Link

Contributed on Aug 03 2022

Yafet Segid

0 Answers Avg Quality 2/10

Closely Related Answers

search api in react js

Comment

function search(items) {
       return items.filter((item) => {
    /*
    // in here we check if our region is equal to our c state
    // if it's equal to then only return the items that match
    // if not return All the countries
    */
       if (item.region == filterParam) {
           return searchParam.some((newItem) => {
             return (
               item[newItem]
                   .toString()
                   .toLowerCase()
                   .indexOf(q.toLowerCase()) > -1
                        );
                    });
                } else if (filterParam == "All") {
                    return searchParam.some((newItem) => {
                        return (
                            item[newItem]
                                .toString()
                                .toLowerCase()
                                .indexOf(q.toLowerCase()) > -1
                        );
                    });
                }
            });
        }

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: www.freecodecamp.org

Tags: api

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

Sourav Deka

0 Answers Avg Quality 2/10

search in api react

Contents

More Related Answers

search in api react

Closely Related Answers

search api in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.