how to add value to array of objects to a particular Index in React-CodePudding

I want add data to array of object on button click, if index value not present create new object and add data

const [sampleArray, setSampleArray] = useState([{fruit:'', Vegetable:''}])

const addData=(index, value)=>
{
    setSampleArray()
}


on first click :  index = 1 & fruit = 'orange'
on second click :  index = 1 & vegetable = 'brinjal'
on third click :  index = 2 & fruit = 'Banana'
on fourth click :  index = 2 & fruit = 'cabbage'

<button onClick={addData}> submit </button>

result should be like this:

[{fruit:'orange', Vegetable:'brinjal'}, {fruit:'Banana', Vegetable:'cabbage'}]

CodePudding user response：

Here is an example solution. Change the value as you wish, all I provide is an example

const addData = (index, value) => {
  const updatedArray = [...sampleArray];

  if (!updatedArray[index]) {
    // Add your data however you want
    updatedArray.push({})
  } else {
    // Change your data however you want
    updatedArray[index].fruit = value;
  }

  setSampleArray(updatedArray);
}

CodePudding user response：

You can introduce a clicks counter state variable to track the number of clicks. And the use the useEffect hook to check which index you are at. Then set your sampleArray fruit or Vegetable if it has not been set yet. If you still have more data for the next index, add a new empty object before writing the fruit. Thus you are not only limited to a fixed number of data.

function App() {
  const [sampleArray, setSampleArray] = React.useState([{ fruit: "", Vegetable: "" }]);

  const data = [{fruit:'orange', Vegetable:'brinjal'}, {fruit:'Banana', Vegetable:'cabbage'}, {fruit:'Apple', Vegetable:'nuts'}];

  const [clicks, setclicks] = React.useState(0);


  React.useEffect(()=>{
    if(!clicks) return;
    const index = Math.floor(clicks/2 0.5);
    let arr = sampleArray;
    if(clicks & 1){ //odd
      if(!arr[index-1] && data[index-1]) arr.push({ fruit: "", Vegetable: "" })
      if(!data[index-1]) return;
      arr[sampleArray.length -1].fruit = data[index-1].fruit;
      addData(index, arr)
    }else{ //even
      if(!data[index-1]) return;
      arr[sampleArray.length -1].Vegetable = data[index-1].Vegetable;
      addData(index, arr)
    }

  },[clicks])

  const addData = (index, value) =>{
    setSampleArray([...value]);
  }


  return (
    <div className="App">
      <button onClick={()=>setclicks(clicks 1)}> submit </button>
      <div>
        {JSON.stringify(sampleArray)}
      </div>
      <div>
        clicks: {clicks}
      </div>
    </div>
  );
}

ReactDOM.render( < App / > , document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>