Here is Parent.js source code:
import React,{useState} from "react";
import Child from "./Child";
export default function Parent(){
const[count,setCount]=useState(0);
return <Child count={count} setCount={setCount}/>
}
the Child.js source code:
import React,{useReducer} from "react";
let reducer = (state, action) => {
let result = { ...state };
return result;
}
export default function Child({count,setCount}){
console.log("hi");
const[text,setText]=useReducer(reducer,count);
return <>{text}<button onClick={()=>{setCount(count+1)}}>Go</button></>
}
My problem is why the variable “text” in Child.js is not updated. at the same time, the variable “count” in Child.js can be updated.