I want to process setState at once

Question

enter image description here

I want to count "indie" and "action" at the same time when the button is clicked. However, the only real application is "action". Please tell me how.

Answer 1

This is my solution to your problem

import React, { useState, useEffect } from "react";

const games = [
  { id: 1, genre: ["indie", "action"] },
  { id: 2, genre: ["indie"] },
  { id: 3, genre: ["action"] }
];

function ButtonComponent(props) {
  const { genre, fn } = props;
  return <button onClick={() => fn(genre)}>Click</button>;
}

function TestPage() {
  const [genre, setGenre] = useState({ indie: 0, action: 0 });

  const addGenrecount = (genres) => {
    setGenre((previousState) => {
      let { indie, action } = previousState;
      genres.forEach((genre) => {
        if (genre === "indie") indie = indie + 1;
        if (genre === "action") action = action + 1;
      });
      return { indie, action };
    });
  };
  useEffect(() => console.log("genre", genre), [genre]); // Logs to the console when genre change

  return games.map((game) => {
    const { id, genre } = game;
    return <ButtonComponent key={id} genre={genre} fn={addGenrecount} />;
  });
}

export default TestPage;

You may also go to codesandbox to test the demo

https://codesandbox.io/s/xenodochial-dirac-q01h4?file=/src/App.js:0-968

---

Just Friendly Tip:

If you need help regarding react I recommend to upload your code to codesandbox so that we can easily reproduce or solve the problem