React render function not updating

Question

I have the following code - I would like to change the react component rendered on a button click. Clicking the button however does nothing. This is the parent class:

export default class SupportsContent extends React.Component {
  currentPage = "userSupportsList";
  goToPage = page => {
    this.currentPage = page;
  }
render() {
    let content = "";
    if (this.currentPage === "userSupportsList") {
      content = <UserSupportsList goToPage={this.goToPage} />
    } else if (this.currentPage === "chooseNewSupport") {
      content = <ChooseNewSupport goToPage={this.goToPage} />
    } else if (this.currentPage === "editSupport") {
      content = <EditSupport goToPage={this.goToPage} />
    } 
    return (
      <Grid>
        {content}
      </Grid>
    );
  }
}

I have the following child component definitions:

function UserSupportsList(props) {
  return (
    <ListItem button onClick={function () {props.goToPage("chooseNewSupport");}}></ListItem> 
  );
}
function ChooseNewSupport(props) {
  return (
    <p>Choose New Support</p>
    );
}

function EditSupport(props) {
  return (
    <p>Edit Support</p>
    );
}

goToPage() needs to be manually bound to .this i believe — Kevin H
– Kevin H, Commented May 21, 2019 at 4:05

user6612182 · Accepted Answer · 2019-05-21 05:44:57Z

React updates a component based on two conditions: If either the components props change or the state is updated using the this.setState function.

I recommend you edit your component to use state instead of a variable:

class SupportsContent extends Component {
    state = {
        currentPage: "userSupportsList"
    }

    goToPage = page => this.setState({ currentPage: page })

    render() {
        let content = "";
        if (this.state.currentPage === "userSupportsList") {
            content = <UserSupportsList goToPage={this.goToPage} />
        } else if (this.state.currentPage === "chooseNewSupport") {
            content = <ChooseNewSupport goToPage={this.goToPage} />
        } else if (this.state.currentPage === "editSupport") {
            content = <EditSupport goToPage={this.goToPage} />
        } 
        return (
            <Grid>
                {content}
            </Grid>
        );
    }
}

Collectives™ on Stack Overflow

React render function not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related