Question 74082 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to filter data after data is fetched in React? – Reactjs

I’m new in React. I’m try to filter data after this data will received.
I have select tag with options and I want to change data array after select will changed.
For example if selected option will have value ‘crypto’ show array only with type ‘crypto’
Thanks for answer

import { useState, useEffect } from 'react'


const Fetch = () => {
    const [data, setData] = useState();
    const [currency, setCurrency] = useState('crypto');
    const [isLoaded, setIsLoaded] = useState(false);

    useEffect(() => {
        fetch('https://api.coingecko.com/api/v3/exchange_rates')
            .then((res) => { return res.json() })
            .then((res) => { setData(res.rates); setIsLoaded(true); console.log(res); })
    }, [])


    if (!isLoaded) {
        return <h2>Waiting for data...</h2>
    } else {
        return (
            <div>
                <label htmlFor="currency">Choose currency: </label>
                <select id='currency' onChange={setCurrency}>
                    <option value="all">All</option>
                    <option value="crypto">Crypto</option>
                    <option value="fiat">Fiat</option>
                    <option value="commodity">Commodity</option>
                </select>

                {Object.values(data).map((item, i) => {
                    return (
                        <div key={i}>
                            <h3>{item.name}({item.unit}) : <span style={{ color: "red" }}>{item.value}</span></h3>
                            <p>type: {item.type} </p>
                            <hr />
                        </div>
                    )
                })}

            </div>
        )
    }
}

export default Fetch;

If statement not working

Tags:

2

Answers


  1. 0

    To filter data in JavaScript, you may use the filter function:

    Object.values(data)
      .filter(item => item?.type === currency)
      .map(...)

    Pass a function of your choice that returns either true or false for each value in the array.

    If you want more details, you can find them in the docs.

    Login or Signup to reply.
  2. 0

    First you need to fix your onChange handler this returns a React ChangeEvent. Currently you’re setting the state to the event instead of the selected value. For this you’ll also need to add a value prop to make the select element a controlled input.

    <select
  id="currency"
  onChange={() => setCurrency(e.target.value)}
  value={currency}
>
  ...
</select>

    For the filtering you can use filter.

    {
  Object.values(data)
    .filter((item) => item.type === currency)
    .map((item, i) => {
      return (
        <div key={i}>
          <h3>
            {item.name}({item.unit}) :{" "}
            <span style={{ color: "red" }}>{item.value}</span>
          </h3>
          <p>type: {item.type} </p>
          <hr />
        </div>
      );
    });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search