Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

199
Views
Filter array and show results in React

I am trying to filter my results via button onClicks in React, but for some reason its not working?

https://stackblitz.com/edit/react-x7tlxr?file=src/App.js

import React, {useEffect, useState} from "react";
import axios from 'axios';
import "./style.css";

export default function App() {

  const [fetchData, setFetchData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  const url = 'https://jsonplaceholder.typicode.com/todos';

  useEffect(() => {
      let mounted = true;
      const loadData = async () => {
          try {
              const response = await axios(url);
              if (mounted) {
                  setFetchData(response.data);
                  setLoading(false);
                  setIsError(false);
                  console.log('data mounted')
              }
          } catch (err) {
              setIsError(true)
              setLoading(false);
              setFetchData([]);
              console.log(err);
          }
      };
      loadData();
      return () => {
          mounted = false;
          console.log('cleaned');
      };
  },
      [url]
  );
  

  const renderdata = () => {
    if (fetchData) {
      return (
        <div>{fetchData.map(inner => {
          return (
            <React.Fragment key={inner.id}>
            <p>{inner.title}</p>
            </React.Fragment>
          )
        })}</div>
      )
    } else {
      <p>No data to display!</p>
    }
  }

  const handle1 = () => {
    const result1 = fetchData.filter((inner) => inner.id === '1');
    setFetchData(result1);
  }

  const handle2 = () => {
    const result2 = fetchData.filter((inner) => inner.id === '2');
    setFetchData(result2);
  }

  const handleAll = () => {
    setFetchData(fetchData);
  }


  return (
    <div>
      <button onClick={handleAll}>Show all</button>
      <button onClick={handle1}>Filter by id 1</button>
      <button onClick={handle2}>Filter by id 2</button>
      {renderdata()}
    </div>
  );
}

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

The id is a number, not a string, so you filter(s) need to be changed like that:

const result1 = fetchData.filter((inner) => inner.id === 1);

You have another problem, is that you change the whole data set when you filter, so once you've filtered, you can't "unfilter" or filter again on another id.

You need to maintain the original fetchedData unchanged.

This example shows how it can be fixed.

about 4 years ago · Juan Pablo Isaza Report

0

I found 2 issues in your code

  1. Id in the API result is numeric not string inner.id === '2'. so this will return false inner.id === 2 you need to use like this

  2. when you assign the filtered value to the original array it will of course change the original array so when you try to filter it second time you don't have the original API result in the fetch data array because it is already filtered So i have created one more array filteredData This will work.

    import React, {useEffect, useState} from "react";
    import axios from 'axios';
    import "./style.css";
    
    export default function App() {
    
      const [fetchData, setFetchData] = useState([]);
      const [filteredData, setFileredData] = useState([]);
      const [loading, setLoading] = useState(true);
      const [isError, setIsError] = useState(false);
    
      const url = 'https://jsonplaceholder.typicode.com/todos';
    
      useEffect(() => {
          let mounted = true;
          const loadData = async () => {
              try {
                  const response = await axios(url);
                  if (mounted) {
                      setFetchData(response.data);
                      setFileredData(response.data)
                      setLoading(false);
                      setIsError(false);
                      console.log('data mounted')
                  }
              } catch (err) {
                  setIsError(true)
                  setLoading(false);
                  setFetchData([]);
                  console.log(err);
              }
          };
          loadData();
          return () => {
              mounted = false;
              console.log('cleaned');
          };
      },
          [url]
      );
    
    
      const renderdata = () => {
        if (filteredData) {
          return (
            <div>{filteredData.map(inner => {
              return (
                <React.Fragment key={inner.id}>
                <p>{inner.title}</p>
                </React.Fragment>
              )
            })}</div>
          )
        } else {
          <p>No data to display!</p>
        }
      }
    
      const handle1 = () => {
        const result1 = fetchData.filter((inner) => inner.id === 1);
        setFileredData(result1);
      }
    
      const handle2 = () => {
        const result2 = fetchData.filter((inner) => inner.id === 2);
        setFileredData(result2);
      }
    
      const handleAll = () => {
        setFileredData(fetchData);
      }
    
    
      return (
        <div>
          <button onClick={handleAll}>Show all</button>
          <button onClick={handle1}>Filter by id 1</button>
          <button onClick={handle2}>Filter by id 2</button>
          {renderdata()}
        </div>
      );
    }
    
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!