Cannot update during an existing state transition in stateless component

Question

I have the following warning :

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor).

with React-redux-router that I understand, but do not know how to fix.

This is the component that is generating the warning.

const Lobby = props => {
  console.log("props", props)
  if (!props.currentGame)
    return (
      <div>
        <input type="text" ref={input => (roomName = input)} />
        <button
          className="button"
          onClick={() => {
            props.createRoom(roomName.value)
          }}
        >
          Create a room
        </button>
      </div>
    )
  else
    return (
      <div>
        {props.history.push(`/${props.currentGame}[${props.username}]`)}
      </div>
    )
}

export default Lobby

What I'm doing here is that my component receives the currentGame property from the Redux store. This property is initialized as null. When the user creates a game, I want to redirect him on a new URL generated by the server that I assign inside the property currentGame with a socket.io action event that is already listening when the container of the component Lobby is initialized.

However, since the currentGame property changes, the component is re-rendered, and therefore the line

{props.history.push(`/${props.currentGame}[${props.username}]`)}

generates a warning since the property currentGame now has a value, and the history property should not get modified during the re-render.

Any idea on how to fix it ?

Thanks!

Answer 1

You should not write props.history.push in render, instead use Redirect

const Lobby = props => {
  console.log("props", props)
  if (!props.currentGame)
    return (
      <div>
        <input type="text" ref={input => (roomName = input)} />
        <button
          className="button"
          onClick={() => {
            props.createRoom(roomName.value)
          }}
        >
          Create a room
        </button>
      </div>
    )
  else
    return (
      <div>
        <Redirect to={`/${props.currentGame}[${props.username}]`} />
      </div>
    )
}

Answer 2

Do one thing, instead of writing the condition and pushing with history.push(), just put the code inside componentDidMount() if you are trying to do in the beginning.

componentDidMount(){
 if(condition){
   history.push('/my-url');
 }
}