Reactjs: useState cannot update - reactjs

Question

I am just learning react,
Here I have set the Initial value and onClick I want to change the value, but nothing happens, react does't rerender the screen, no value changes.
const app = () => {
const [person, setPerson] = useState([
{name:'sugumar',age:23},
{name:'vijay',age:25}
]
)
const changeNameHandler = () => {
console.log('change name called');
setPerson((person)=>{
console.log('set property called');
person[0].name = 'Arun';
return person;
})
}
return (
<div className='App'>
<button onClick={changeNameHandler}>Change Name</button>
<Person name={person[0].name} age={person[0].age}></Person>
<Person name={person[1].name} age={person[1].age}></Person>
</div>
)
}
export default app;

Answer 1

person[0].name will reference the array created from initializing the state. Changing its identifier will not help either. You need to clone the array to prevent mutating it. You can read more on functional programming & immutable objects
function Clone(obj) {
if (obj === null || typeof obj !== "object" || "isActiveClone" in obj)
return obj;
var temp;
if (obj instanceof Date) temp = new obj.constructor();
//or new Date(obj);
else temp = obj.constructor();
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
obj["isActiveClone"] = null;
temp[key] = Clone(obj[key]);
delete obj["isActiveClone"];
}
}
return temp;
}
const changeNameHandler = () => {
let newPerson = Clone(person);
newPerson[0].name = "Arun";
setPerson(newPerson);
};
In this context however, you can also use the spread syntax (ES6 feature) so you will no longer need the aforementioned Clone function. You may opt to use the function I shared when your object gets more complex & you need to deep clone.
const changeNameHandler = () => {
let newPerson = [...person];
newPerson[0].name = "Arun";
setPerson(newPerson);
};
CodeSandBox: https://codesandbox.io/s/lively-fire-qmvil?file=/src/App.js:198-331

Answer 2

Try this
import React, { useState } from "react";
const Person = ({ name, age }) => (
<div>
{name} - {age}
</div>
);
const App = () => {
const [person, setPerson] = useState([
{ name: "sugumar", age: 23 },
{ name: "vijay", age: 25 }
]);
const changeNameHandler = () => {
person[0].name = "Arun, Updated On: " + new Date().getTime();
setPerson([...person]);
};
return (
<div className="App">
<button onClick={changeNameHandler}>Change Name</button>
<Person name={person[0].name} age={person[0].age} />
<Person name={person[1].name} age={person[1].age} />
</div>
);
};
export default App;
I think you're missing what is stated here https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables

Answer 3

Create a second copy of the array before modifying it ...
const changeNameHandler = () => {
console.log('change name called');
let persons = person;
persons[0].name = 'Arun';
setPerson(persons);
}
For what it's worth ... I don't think binding a form to a single element in an array is a good choice for updating state ... but it's what you asked for.
.. and you don't need to return the value from the event handler.