useState / setData is not updating-CodePudding

I am trying to figure out a way to do filter by price and name, but somehow the useState won't update. I printed the result out and it worked on both checkboxes. By the way, is it better to use onChange or onClick on checkbox, both look the same to me. I have watched many tutorials and searched for many possible solutions but I still can't solve this problem.

let product = [
    {
      name: "tesla",
      cost: 500,
    },
    {
      name: "benz",
      cost: 1000,
    },
    {
      name: "honda",
      cost: 200,
    },

    {
      name: "apple",
      cost: 400,
    },
  ];

  const [data, setData] = useState(product);

  const sortbyprice = () => {
    const result = product.sort((a, b) => {
      return a.cost > b.cost ? 1 : -1;
    });
    setData(result);
    console.log(result);
  };

  const sortbyname = () => {
    const result = product.sort((a, b) => {
      return a.name > b.name ? 1 : -1;
    });

    setData(result);
    console.log(data);
  };

  return (
    <div className="App">
      <div className="sort price">
        <h3>Sort by price</h3>
        <input
          type="checkbox"
          className="searchbar"
          onChange={sortbyprice}
        ></input>
      </div>
      <div className="sort name">
        <h3>Sort by name</h3>
        <input
          type="checkbox"
          className="searchbar"
          onChange={sortbyname}
        ></input>
      </div>

      <div className="product-container">
        {data.map((item, index) => {
          return (
            <div className="product" key={index}>
              <h2>{item.name}</h2>
              <p>{item.cost}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

CodePudding user response：

I'm updating my answer in order to cover both cases where product is inside the component or outside.

The problem is the array mutation

You can read more here

CodePudding user response：

This all looks good, I run it on codesandbox and it does rerenders. But anyway I would suggest you to move product array out of the component, and just to use it as initial value for useState hook, and on state update use input parameter from setData callback - eg: setData(prev => [...prev.sort(...)]), no need each time to reference initial array since you already used it when calling hook in your component.