React child component does not update when parent state changes (hooks)

Question

I have a parent component called Controller. In Controller testUser is defined and updated.

function Controller() {

    const [testUser, setTestUser] = useState("1")
    
    const myEvents = <MyEvents user={testUser} handleNav={handleNav}/>
    const joinedEvents = <JoinedEvents user={testUser} handleNav={handleNav}/>
    const mySurveys = <MySurveys user={testUser} handleNav={handleNav}/>
    const addUser = <NavLayout user={testUser} handleNav={handleNav}><AddUser/></NavLayout>

    const [content, setContent] = useState(myEvents)

    function handleNav(component) {
        if (component==="my-events") {
            setContent(myEvents)
        } else if (component==="joined-events") {
            setContent(joinedEvents)
        } else if (component==="my-surveys") {
            setContent(mySurveys)
        } else if (component==="add-user") {
            setContent(addUser)
        } else {
            console.log(component)
        }
    }

    return (
        <div>
            <label>User: {testUser} </label>
            <select 
                value={testUser}
                onChange={event => setTestUser(event.target.value)}
            >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select> 

            <hr />

            {content}
            
        </div>
    )
}

export default Controller

When I change the value of the dropdown, the value listed in the label element ({testUser}) is updated correctly. However, in MyEvents I have this:

function MyEvents(props) {
    
    const overview = (
        <NavLayout handleNav={props.handleNav}>
            <div>
                <h1> My events: {props.user} </h1> 
                <EventsOverview user={props.user} handleEventNav={handleEventNav} handleReturn={handleReturn} status={"moderator"}/>
            </div>
        </NavLayout>
    )

    ...
}

MyEvents displays the initial value of testUser correctly (the one set when it's initialised). However, when the dropdown value is changed in Controller, it doesn't update. Not sure why this is as it updates fine in the parent component.

Apologies if I'm missing something obvious, been stuck for ages. Any help is much appreciated.

Answer 1

I have a parent component called Controller. In Controller testUser is defined and updated.

function Controller() {

    const [testUser, setTestUser] = useState("1")
    
    const myEvents = <MyEvents user={testUser} handleNav={handleNav}/>
    const joinedEvents = <JoinedEvents user={testUser} handleNav={handleNav}/>
    const mySurveys = <MySurveys user={testUser} handleNav={handleNav}/>
    const addUser = <NavLayout user={testUser} handleNav={handleNav}><AddUser/></NavLayout>

    const [content, setContent] = useState(myEvents)

    function handleNav(component) {
        if (component==="my-events") {
            setContent(myEvents)
        } else if (component==="joined-events") {
            setContent(joinedEvents)
        } else if (component==="my-surveys") {
            setContent(mySurveys)
        } else if (component==="add-user") {
            setContent(addUser)
        } else {
            console.log(component)
        }
    }

    return (
        <div>
            <label>User: {testUser} </label>
            <select 
                value={testUser}
                onChange={event => setTestUser(event.target.value)}
            >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select> 

            <hr />

            {content}
            
        </div>
    )
}

export default Controller

When I change the value of the dropdown, the value listed in the label element ({testUser}) is updated correctly. However, in MyEvents I have this:

function MyEvents(props) {
    
    const overview = (
        <NavLayout handleNav={props.handleNav}>
            <div>
                <h1> My events: {props.user} </h1> 
                <EventsOverview user={props.user} handleEventNav={handleEventNav} handleReturn={handleReturn} status={"moderator"}/>
            </div>
        </NavLayout>
    )

    ...
}

MyEvents displays the initial value of testUser correctly (the one set when it's initialised). However, when the dropdown value is changed in Controller, it doesn't update. Not sure why this is as it updates fine in the parent component.

Apologies if I'm missing something obvious, been stuck for ages. Any help is much appreciated.