CODEWITHSUNDEEP
reactjs
youngprogrammer1997
youngprogrammer1997

Reputation: 71

Trying to filter data that I fetched with fetch API in ReactJs

I'd like to filter the data fetched from the api by names that include the letter "A" and then place only the employee names in a div. I've been trying for a while but can't seem to get it to work. How can I achieve this?

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

export default function App() {
  const [data, setData] = useState([]);
  const [input, setInput] = useState("");
  const [suggestions, setSuggestions] = useState([]);

  useEffect(() => {
    fetch("https://dummy.restapiexample.com/api/v1/employees")
      .then((response) => response.json())
      .then((result) => setData(result.data));
  }, []);

  const info = data.map((employee) => {
    return <div> {employee.employee_name} </div>;
  });

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div className="App">
      <form>
        {" "}
        Enter your Search:
        <input type="text" onChange={handleChange}></input>
      </form>
      <div className="suggestions-div">{info}</div>
    </div>
  );
}

Upvotes: 0

Views: 4730

Answers (3)

Ioannis Potouridis
Ioannis Potouridis

Reputation: 1316

If you want to filter the data based on your input's value, one way to do it is the following.

  const filteredData = useMemo(() => {
    if (!data) return [];
    if (!input) return data;

    return data.filter((employee) =>
      employee.employee_name.toLowerCase().includes(input.toLowerCase())
    );
  }, [data, input]);

  const info = filteredData.map((employee) => {
    return <div> {employee.employee_name} </div>;
  });

Upvotes: 1

Corey Larson
Corey Larson

Reputation: 1154

If you're wanting to filter specifically by the letter "A", then you could accomplish that like this:

const info = data
  .filter((employee) =>
    employee.employee_name.includes("A"))
  .map((employee, index) => (
    <div key={index}>{employee.employee_name}</div>
  ));

However, it looks like your intention is to filter by the value entered into input. If that's the case, I would perform a case-insensitive filter on data by the value of input like this:

const info = data
  .filter((employee) =>
    employee.employee_name.toLowerCase().includes(input.toLowerCase()))
  .map((employee, index) => (
    <div key={index}>{employee.employee_name}</div>
  ));

Note: You also need to add a key to the top-level element inside your .map(). That could be the unique ID of the employee object or simply the index of the map as in my examples above.

Upvotes: 2

DecPK
DecPK

Reputation: 25408

You can filter and set state as, This will filter out and set the data state using setData. CODESANDBOX

setData(result.data.filter((str) => str.employee_name.includes("A")))

Upvotes: 1

Related Questions