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

Question

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>
  );
}

Are you wanting to filter specifically by the letter "A" or by what is entered into the <input />? — Corey Larson
– Corey Larson, Commented Oct 6, 2021 at 15:09

Corey Larson · Accepted Answer · 2021-10-06 15:26:20Z

2

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.

edited Oct 6, 2021 at 15:26

answered Oct 6, 2021 at 15:20

Corey Larson

1,17410 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

youngprogrammer1997 Over a year ago

This worked absolutely perfectly. Thank you!

DecPK · Accepted Answer · 2021-10-06 15:13:20Z

1

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")))

answered Oct 6, 2021 at 15:13

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Comments

Ioannis Potouridis · Accepted Answer · 2021-10-06 15:32:13Z

1

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>;
  });

answered Oct 6, 2021 at 15:32

Ioannis Potouridis

1,3366 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related