React UseState Hooks

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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

Answer 6

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.

Answer 7

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!

Answer 8

Burey

Answer 9

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

Answer 10

Saad Mughal Oh, lol I got it wrong. 😅

Answer 11

Arb Rahim Badsa No problem
But confusing
You said you got it wrong
And cavin say you are right
😐

Answer 12

OK let me try It thanks for your help guys

Answer 13

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

Answer 14

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

Answer 15

This syntax also works for me

let newValue = [...value];

newValue. map(ob => {
ob.title = "new title"
)
setValue(newValue):