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