I want to filter items by filter method and I did it but it doesn't work in UI but
when I log it inside console it's working properly
I don't know where is the problem I put 2 images
Explanation of this code:
Looping inside currencies_info by map method and show them when I click on it and this completely working then I want filter the list when user enter input inside it I use filter method and this completely working in console not in UI

import React, { useState } from "react";

// Artificial object about currencies information
let currencies_info = [
  {
    id: 1,
    name: "بیت کوین (bitcoin)",
    icon: "images/crypto-logos/bitcoin.png",
    world_price: 39309.13,
    website_price: "3000",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 2,
    name: "اتریوم (ethereum)",
    icon: "images/crypto-logos/ethereum.png",
    world_price: 39309.13,
    website_price: "90",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 3,
    name: "تتر (tether)",
    icon: "images/crypto-logos/tether.png",
    world_price: 39309.13,
    website_price: "5",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 4,
    name: "دوج کوین (dogecoin)",
    icon: "images/crypto-logos/dogecoin.png",
    world_price: 39309.13,
    website_price: "1000000",
    balance: 0,
    in_tomans: 0
  },
  {
    id: 5,
    name: "ریپل (ripple)",
    icon: "images/crypto-logos/xrp.png",
    world_price: 39309.13,
    website_price: "1,108",
    balance: 0,
    in_tomans: 0
  }
];

export default function Buy() {
  // States
  let [api_data, set_api_data] = useState(currencies_info);
  const [currency_icon, set_currency_icon] = useState("");
  const [currency_name, set_currency_name] = useState("");
  const [currency_price, set_currency_price] = useState(0);
  const [dropdown, set_drop_down] = useState(false);
  let [search_filter, set_search_filter] = useState("");

  // States functions
  // this function just toggle dropdown list
  const toggle_dropdown = () => {
    dropdown ? set_drop_down(false) : set_drop_down(true);
  };
  // this function shows all currencies inside dropdown list and when click on each item replace
  //  the currency info and hide dropdown list
  const fetch_currency = (e) => {
    set_drop_down(false);
    currencies_info.map((currency) => {
      if (e.target.id == currency.id) {
        set_currency_name(currency.name);
        set_currency_icon(currency.icon);
        set_currency_price(currency.website_price);
      }
    });
  };
  // this function filter items base on user input value
  const filter_currency = (e) => {
    set_search_filter = currencies_info.filter((currency) => {
      return currency.name.indexOf(e.target.value) !== -1;
    });
    api_data = set_search_filter;
    console.log(api_data);
  };

  return (
    <div className="buy-page-input" onClick={toggle_dropdown}>
    {/* currency logo */}
    <div className="currency-logo">
    <img src={currency_icon} width="30px" />
    </div>
    {/* currency name in persian */}
    <span className="currency-name">{currency_name}</span>
    {/* currency dropdown icon */}
    <div className="currency-dropdown">
    <img className={dropdown ? "toggle-drop-down-icon" : ""}
    src="https://img.icons8.com/ios-glyphs/30/000000/chevron-up.png"
    />
    </div>
    </div>
    {/* Drop down list */}
    {dropdown ? (
    <div className="drop-down-list-container">
    {/* Search box */}
    <div className="search-box-container">
    <input type="search" name="search-bar" id="search-bar"
    placeholder="جستجو بر اساس اسم..."
    onChange={(e) => {
    filter_currency(e);
    }}/>
    </div>
    {api_data.map((currency) => {
    return (<div className="drop-down-list" onClick={(e) => { 
    fetch_currency(e);}} id={currency.id}>
    <div  id={currency.id}>
    <img src={currency.icon} width="20px" id={currency.id} />
    <span id={currency.id}>{currency.name}</span>
    </div>
    <div className="left-side" id={currency.id}>
    <span id={currency.id}>قیمت خرید</span>
    <span className="buy-price" id={currency.id}>
        {currency.website_price}تومان</span>
    </div>
    </div>);})}
    </div>) : ("")});}

CodePudding user response：

Your search_filter looks redundant to me.
Try to change the filter_currency function like this:

const filter_currency = (e) => {
    const search = e.target.value;
    const filtered = currencies_info.filter((currency) => {
        return currency.name.includes(search);
    });
    set_api_data(filtered);
};

CodePudding user response：

It looks like you are never setting the api_data after you set the filter state.

Change the following

api_data = set_search_filter
console.log(api_data)

to

api_data = set_search_filter
set_api_data(api_data)

However, it then looks like set_search_filter is never used and only set so to improve this further you could remove that state and just have it set the api_data direct. Something like this:

const filter_currency = (e) => {
    const search_filter = currencies_info.filter((currency) => {
        return currency.name.indexOf(e.target.value) !== -1
    })

    set_api_data(search_filter)
}

CodePudding user response：

Change your state value from string to array of the search_filter like this -

let [search_filter, set_search_filter] = useState([]);

and also it should be like this -

const filter_currency = (e) => {
  const filterValues = currencies_info.filter((currency) => {
    return currency.name.indexOf(e.target.value) !== -1;
  });
  set_search_filter(filtervalues);
  set_api_data(filterValues);
  console.log(filterValues);
};

and use useEffect with search_filter as dependency, so that every time search_filter value is being set, useEffect will trigger re render, for eg:-

useEffect(()=>{
 //every time search_filter value will change it will update the dom.
},[search_filter])