In my react component, I'm using the replace method to replace a word however this doesn't appear to be working:
const myComponent = () => {
const [textVal, setTextVal] = useState("hello there")
textVal.replace("hello", "hi")
console.log(textVal) // expecting "hi there" but still getting "hello there"
return ( ... )
}
In react state is immutable, you cant change the value of a state by simply assigning a value to it, you need to use the provided setter function for it:
const myComponent = () => {
const [textVal, setTextVal] = useState("hello there")
setTextVal(val=> val.replace("hello", "hi"))
console.log(textVal)
return ( ... )
}
useEffect so it doesn't re-render too many times.
replacereturns a new string, it doesn't modify the old. Second, if you want this to persist between renders, you would need to callsetTextValwith the new value.