React letter game

Question

Hit and miss game developed in react.js with functional components**

Demo

Answer 1

We can achieve that by adding another prop to buttons, after being clicked without having to change the initialState: I have posted only modified code, and the full example is on codesandbox.

 const buttonClickHandler = (id) => {
    if (count === 0) {
      return;
    }
    setCount(count - 1);
    // Update an array of objects
     setButtons(
      initialState.map((element) =>
        [...buttons]
          .sort((a, b) => (b.label < a.label ? 1 : -1))
          .map((item, index) =>
            item.id === id
              ? {
                  ...item,
                  clicked: true,
                  inOrder: !index
                    ? item.isRight
                    : item.isRight &&
                      buttons.sort((a, b) => (b.label < a.label ? 1 : -1))[
                        index - 1
                      ].clicked,
                  disabled: true
                }
              : item
          )
          .find((item) => item.id === element.id)
      )
    );
  };
...
const checkIfCorrect = () => {
    let correct = buttons.filter(
      (item) => item.clicked === true && item.isRight === true && item.inOrder
    ).length;
    if (correct === 6) {
      setCorrect(true);
    } else {
      setCorrect(false);
    }
  };