+ 1

React UseState Hooks

How should I update the previous values in useState e.g const [value, setValue] = useState([ { title : "React Hook" } ]); I want To update the title in the useState how can I do

30th Apr 2020, 11:59 AM
Saad Saleem
Saad Saleem - avatar
15 odpowiedzi
+ 7
cons updateInIndex = (index, data) => { // index: index in the array // data: the updated object that should replace the data in the given index const newData = value.slice(); newData[index] = {...newData[index], ...data}; setState(newData); }
30th Apr 2020, 2:05 PM
Burey
Burey - avatar
+ 3
If value is an array, To add another element in value setValue([...value, {title: 'Another text'}]); Or to overwrite the existing element setValue([{title: 'Another text'}]);
30th Apr 2020, 1:03 PM
Calviղ
Calviղ - avatar
+ 1
Use the setValue() function to update the state later. Like so : setValue(...value, {title: 'Another text'}); Edited: setValue([...value, {title: 'Another text'}]); This will add another element to the value state.
30th Apr 2020, 12:25 PM
Arb Rahim Badsa
Arb Rahim Badsa - avatar
+ 1
Arb Rahim Badsa 😄😄 I know that's easy but I don't want to add another title I want To update the previous title Like setState in classes
30th Apr 2020, 12:28 PM
Saad Saleem
Saad Saleem - avatar
+ 1
Arb Rahim Badsa I think you are almost there. It should be setValue({ ...value, title: 'Another text' }); Or more proper way is setValue( v => { ...v, title: 'Another text' });
30th Apr 2020, 12:46 PM
Calviղ
Calviղ - avatar
+ 1
Saad Mughal you might added extra [] on useState. It should be const [value, setValue] = useState({ title : "React Hook" }); Unless you really want to set value as a single element array.
30th Apr 2020, 12:53 PM
Calviղ
Calviղ - avatar
+ 1
Calviղ I actually thought, as it is an array, '...value' will include all the existing elements and passing an object as the second parameter will add another object in the state. Really thanks for the clarification!
30th Apr 2020, 12:56 PM
Arb Rahim Badsa
Arb Rahim Badsa - avatar
30th Apr 2020, 12:02 PM
Saad Saleem
Saad Saleem - avatar
0
Saad Mughal Arb Rahim Badsa 's way is not add another title, it's update the existing title. Read more on spread operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
30th Apr 2020, 12:37 PM
Calviղ
Calviղ - avatar
0
Saad Mughal Oh, lol I got it wrong. 😅
30th Apr 2020, 12:40 PM
Arb Rahim Badsa
Arb Rahim Badsa - avatar
0
Arb Rahim Badsa No problem But confusing You said you got it wrong And cavin say you are right 😐
30th Apr 2020, 12:44 PM
Saad Saleem
Saad Saleem - avatar
0
OK let me try It thanks for your help guys
30th Apr 2020, 12:49 PM
Saad Saleem
Saad Saleem - avatar
0
Calviղ yes I am also thinking about overwrite the previous object and try To implement it Thanks for your help If it's work I will tell you
30th Apr 2020, 1:07 PM
Saad Saleem
Saad Saleem - avatar
0
Some one suggest that Use spread operator to copy the state into new variable and then change that variable and by using setvalue pass new array to it
30th Apr 2020, 1:27 PM
Saad Saleem
Saad Saleem - avatar
0
This syntax also works for me let newValue = [...value]; newValue. map(ob => { ob.title = "new title" ) setValue(newValue):
2nd May 2020, 11:01 AM
Saad Saleem
Saad Saleem - avatar