Save data in a special order when click on button

by

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

More Related Contents:

  1. Understanding unique keys for array children in React.js
  2. What do these three dots in React do?
  3. Arrow function without curly braces
  4. Show or hide element in React
  5. How to set focus on an input field after rendering?
  6. Problem in redirecting programmatically to a route in react router v6
  7. What happens when using this.setState multiple times in React component?
  8. React – changing an uncontrolled input
  9. Reactjs setState() with a dynamic key name?
  10. What does npm install –legacy-peer-deps do exactly? When is it recommended / What’s a potential use case?
  11. ReactJS – .JS vs .JSX
  12. TypeError: Cannot read property ‘setState’ of undefined
  13. Is this the correct way to delete an item using redux?
  14. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  15. reactjs this.refs vs document.getElementById
  16. Using anchor tags in react-router 4
  17. Cleaner/shorter way to update nested state in Redux?
  18. React js change child component’s state from parent component
  19. React-router: How to manually invoke Link?
  20. How to sort array of objects based on a boolean property?
  21. Playing sound in React.js
  22. Should we use useCallback in every function handler in React Functional Components
  23. React: Axios Network Error
  24. What is the best way to have a fallback image in NextJS?
  25. React cannot read property map of undefined
  26. How to properly use useHistory () from react-router-dom?
  27. React Error: “SharedArrayBuffer is not defined” in Firefox
  28. passing data from child to parent component – react – via callback function
  29. How to set iframe content of a react component
  30. How should I alternate componentWillMount()?

Leave a Comment