There appears to be an issue with the code below where the variable newName's state is not changing as expected.
import React, { useState } from 'react'
const App = () => {
const [ persons, setPersons] = useState([
{ name: 'Arto Hellas' }
])
const [ newName, setNewName ] = useState('')
const textChangeHandler = (event)=>{
event.preventDefault()
setNewName(event.target.value) // WORKS FINE
}
const submitHandler = (event)=>{
event.preventDefault()
let temp = {name:newName}
setNewName('') //////////////////////////////////////// PROBLEM - doesnot set state!!
console.log('tenp name is',temp.name)
console.log('new name is',newName)
setInterval(()=>console.log("Set Interval",newName), 1000)
}
return (
<div>
<h2>Phonebook</h2>
<form onSubmit={submitHandler}>
<div>
name: <input onChange={textChangeHandler} />
</div>
<div>
<button type="submit" >add</button>
</div>
</form>
<h2>Numbers</h2>
{persons.map((person) => <Person key = {person.name} name={person.name}/> )}
</div>
)
}
const Person = ({name})=> <p> {name} </p>
The function setNewName works correctly when typing in the input box, updating the name accordingly. However, upon clicking the submit button, setNewName fails to update the name. Despite calling setNewName, the name remains unchanged.
I attempted using a setInterval to address any asynchronous behavior in JavaScript, but even then the updated newName was not reflected.
How can this problem be identified and resolved?
Your help is greatly appreciated!