Save data in a special order when click on button

Question

I create an application where user can add some notes to a specific car in my examlpe. User has to be able to add a comment and to rate the car.

const App = () => {
  const [state, setState] = useState({ visible: false });
  const [myData, setMyData] = useState([]);

  const showModal = () => {
    setState({
      visible: true
    });
  };

  const handleOk = (e) => {
    setState({
      visible: false
    });
    console.log("all data", myData);
  };

  const handleCancel = (e) => {
    console.log(e);
    setState({
      visible: false
    });
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        visible={state.visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Data setMyData={setMyData} />
      </Modal>
    </>
  );
};

In console.log("all data", myData); i have to get the result.
Now i have this array of items:

const data = [
  {
    cars: [
      {
        carName: "bmw",
        carSpeed: 100
      }
    ],
    carCat: "4X4 car",
    carColor: "blue"
  },
  {
    cars: [
      {
        carName: "audi",
        carSpeed: 150
      }
    ],
    carCat: "fast car",
    carColor: "red"
  },
  {
    cars: [
      {
        carName: "mercedes",
        carSpeed: 170
      }
    ],
    carCat: "confort car",
    carColor: "white"
  }
];

When user will open the modal, he will se 3 blocks of data, there he will be able to add comments and a rate.
Scenario: In this way if user adds data in the 4X4 car block (rate and comment). and after that saves the data, clicking on save button, the array should change in the next way:

const data = [
  {
    cars: [
      {
        carName: "bmw",
        carSpeed: 100
      }
    ],
    carCat: "4X4 car",
    carColor: "blue",
    rate: 3,  // depends by the user rate
    comments: ["user's text"] // depends by user
  },
  {
    cars: [
      {
        carName: "audi",
        carSpeed: 150
      }
    ],
    carCat: "fast car",
    carColor: "red"
  },
  {
    cars: [
      {
        carName: "mercedes",
        carSpeed: 170
      }
    ],
    carCat: "confort car",
    carColor: "white"
  }
];

If user add data not just for one block but for all, all data from array should change according to the previous way, depending by the user input.
Now i get just an array of data when i save.
Question: How to implemement what i described above? Thanks for help.
demo: https://codesandbox.io/s/hungry-margulis-4yx9b?file=/Data.js:60-489

Answer 1

To make your scenario working you should update <Data /> and <SetData /> components as follows:

const Data = () => {
  const [cars, setCars] = useState(data);

  const setRate = (category, rate) => {
    const newCars = [...cars];
    let index = newCars.findIndex((c) => c.carCat === category);
    newCars[index] = Object.assign(newCars[index], { rate });

    setCars(newCars);
  };

  const setComment = (category, comment) => {
    const newCars = [...cars];
    let index = newCars.findIndex((c) => c.carCat === category);
    newCars[index] = Object.assign(newCars[index], { comment });

    setCars(newCars);
  };

  return (
    <div>
      {cars.map((i) => {
        return (
          <div key={i.carCat}>
            <span>{i.carCat}</span>
            <SetData
              setRate={(rate) => setRate(i.carCat, rate)}
              setComment={(comment) => setComment(i.carCat, comment)}
            />
          </div>
        );
      })}
    </div>
  );
};

const SetData = ({ setRate, setComment }) => {
  return (
    <div>
      <Rate onChange={setRate} />
      <input
        onChange={(e) => setComment(e.target.value)}
        placeholder="comment"
      />
    </div>
  );
};

The most important part here is how setRate and setComment props of <SetData /> component are passed.

<SetData
  setRate={(rate) => setRate(i.carCat, rate)}
  setComment={(comment) => setComment(i.carCat, comment)}
/>

---

Update 1

How to create an array of comments, for example user add one time a comment and clicks on OK button to save, and after that again open the modal and also add another comment for that block, and in this way to create an array of comments.

Basically, you need to lift state up even further to <App /> component. Use this example as guidance: https://codesandbox.io