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.

Answer 1

To make your scenario working you should update and 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 (
    

      {cars.map((i) => {
        return (
          

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

const SetData = ({ setRate, setComment }) => {
  return (
    

      
       setComment(e.target.value)}
        placeholder="comment"
      />
    
  );
};

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

 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 component. Use this example as guidance: https://codesandbox.io