Rerendering child component when parent state changes in React

Question

I'm still pretty new to React, so I'm sorry if this has a simple answer. I'm trying to make a bar at the top of the page re-render every time the URL changes (with React Router). After struggling with this for a while (please let me know if you have any thoughts on an easier solution!), I decided to update the state when a URL changes and pass this new state into a component. Here is a simplified version of the code:

    import React from 'react';
    import {
      AppBar, Toolbar, Typography
    } from '@material-ui/core';
    import './TopBar.css';

    class TopBar extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          url: props.url
        }

        this.parseURL = this.parseURL.bind(this);
      }
      
      

      static getDerivedStateFromProps(props, state) {
        if (state.url !== props.url) {
          return {
            url: props.url
          }
        }

        return null;
      }

      render() {
        return (
          <AppBar position="absolute">
            <Toolbar>
              <Typography variant="h5" color="inherit">
                {this.state.url}
              </Typography>
            </Toolbar>
          </AppBar>
        );
      }
    }
    
    export default TopBar;

import React from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter, Route, Switch
} from 'react-router-dom';
import {
  Grid, Typography, Paper
} from '@material-ui/core';
import './styles/main.css';

import TopBar from './components/topBar/TopBar';
import UserDetail from './components/userDetail/userDetail';
import UserPhotos from './components/userPhotos/userPhotos';

class PhotoShare extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      url: window.location.href
    }
  }

  render() {
    return (
      <HashRouter>
      <div>
      <Grid container spacing={8}>
        <Grid item xs={12}>
          <TopBar url={this.state.url} key={this.state} />
        </Grid>
        
        <Grid item sm={9}>
          <Paper className="cs142-main-grid-item">
            <Switch>
              <Route path="/users/:userId"
                render={ props => {
                  this.state.url = props.match.params.userId;
                  console.log(this.state.url);
                  return <UserDetail {...props}
                  key={props.match.params.userId} />;} }
              />
              <Route path="/photos/:userId"
                render={ props => {
                  this.state.url = props.match.params.userId;
                  console.log(this.state.url);
                  return <UserPhotos {...props}
                  key={props.match.params.userId} />;} }
              />
            </Switch>
          </Paper>
        </Grid>
      </Grid>
      </div>
      </HashRouter>
    );
  }
}


ReactDOM.render(
  <PhotoShare />,
  document.getElementById('photoshareapp'),
);

The console.log statements when I click a link show that the url state in the PhotoShare component is changing, but the TopBar component is not re-rendering when it changes. Is there any way to make sure it re-renders? Thanks for any help!

@Aidin53 I've been seeing online that it does, but that isn't happening for me, maybe I have something preventing this from happening? — dannnny, Jul 06 '22 at 06:02

Nice Books · Accepted Answer · 2022-07-06T06:51:14.213

Just a few remarks:

Don't use the state as a key for TopBar, In the render of PhotoShare.
React keys should be simple Strings.
You can simply use "TopBar" as a key.
Anyways it's a single child & a key may not be even required.

Don't use props.url in your TopBar constructor (leave it null & let getDerivedStateFromProps do its work.

I'm wondering if accessing window.location.href is a side effect. Perhaps, try setState(window.location.href) inside componentDidMount instead of initializing it in the constructor itself.

Never set state using this.state.foo = . The setState method should be used instead. Not sure about React router, but you cannot update state anyways inside a render method.

See Detect Route Change with react-router for a better solution.

Thank you for your help! Using the setState method seems to be actually chaning the state (and causing an error in the console about the render method, which I didn't have before, so maybe something weird was going on there!). Do you have any thoughts about how to update the state when the URL changes? — dannnny, Jul 06 '22 at 06:42

Rerendering child component when parent state changes in React

1 Answers1