javascript - 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>
    </>
  );
};

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