I have a following array,
const bio = [
{id: 1, name: "Talha", age: 26},
{id: 2, name: "Ayub", age: 22}
]
Here is a complete code of mine,
import './App.css';
import React, {useState} from 'react';
const bio = [
{id: 1, name: "Talha", age: 26},
{id: 2, name: "Ayub", age: 22}
]
const App = () => {
const [bioData, setbioData] = useState(bio);
const clear_function = () => setbioData([])
return (
<div className="App">
{
bioData.map((arr) =>
<>
<h3 key={arr.id}>Name: {arr.name}, Age: {arr.age}</h3>
<button onClick={() => clear_function()}>Click me</button>
</>
)}
</div>
);
}
export default App;
Now, this code hooks the whole array to useState. Whenever I click the button "Click me", it sets the state to empty array and returns empty array as a result.
But what if I want to remove a specific row of the array? I have made two buttons, each for one row. What I want to do is if I click the first button, it removes the first row from the array as well and keeps the 2nd array.
Similarly, if I want to change a specific attribute value of a specific row, how can I do that using useState hook? For example, I want to change the name attribute of the 2nd row. How is it possible to do this with useState?
And same case for addition. IF I make a form and try to add a new row into my bio array, how would I do that? I searched it up on Google, found a similar post as well but the answer given in it wasn't satisfactory and did not work, which is why I am asking this question again.
If I understood the question right, I think you can pass the updated object to set state and that'll be it.
To change a particular object in array, do something lie this:
// Update bio data with id = 2
setbioData(prevValue =>
[...prevValue].map(el =>
el.id === 2 ? ({...el, name:'new name'}) : el)
)
Also, you have set key at the wrong place
Full refactored code:
const bio = [
{id: 1, name: "Talha", age: 26},
{id: 2, name: "Ayub", age: 22}
]
const App = () => {
const [bioData, setbioData] = useState(bio);
const clear_function = (id) => {
setbioData(prevValue =>
[...prevValue].map(el =>
el.id === id ? ({...el, name:'new name'}) : el)
)
}
return (
<div className="App">
{
bioData.map((arr) =>
<div key={arr.id}>
<h3>Name: {arr.name}, Age: {arr.age}</h3>
<button onClick={() => clear_function(arr.id)}>Click me</button>
</div>
)}
</div>
);
}
I'm not sure if I fully understand your question, but when you want to change the state in a functional component, you can't directly change the state object, instead you need to create a new desired state object, and then set the state to that object. for example, if you want to add a new row to your array, you'll do the following:
setbioData((currBioData) => [...oldBioData, {id: 3, name: "Bla", age: 23}]);
When you want to change the state based on the current state, there's an option to send the setState function a callback function which accepts the current state, and then using the spread operator we add a new row to the array.
I'm not going to get into why it is better to pass setState a function to modify current state but you can read about it in React official docs
Looks like there are 3 questions here. I'll do my best to help.
"what if I want to remove a specific row of the array?"
One way is to filter your current array and update the state with the new array.
In your example: onClick={()=>setbioData(arr.filter(row=>row.id !== arr.id))}
"if I want to change a specific attribute value of a specific row, how can I do that using useState hook?"
You will need to create a new array with the correct information and save that array to state.
In your example: [... bioData, {id:/row_id/,name:/new name/,age:/new age/}]
"IF I make a form and try to add a new row into my bio array, how would I do that" In this case, you would push a new object into your array. In your example:
setbioData(previousData=>previousData.push({id:previousData.length+1,name:/new name/,age:/new age/})
I hope this helps you, best of luck