CODEWITHSUNDEEP
javascriptreactjs
asif kaif
asif kaif

Reputation: 159

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

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'}]

Upvotes: 0

Views: 342

Answers (2)

FlushBG
FlushBG

Reputation: 281

Here is an example solution:

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

Upvotes: 1

MWO
MWO

Reputation: 2806

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>

Upvotes: 1

Related Questions