How to render the “disabled” HTML attribute on server with React.js 16?

Question

I just updated to React.js 16 and I am having a hard time using a simples HTML attribute in a button . This is my code:

const disabled = this.props.disabled;
console.log(disabled);
return <button id="my-id" disabled={disabled}>Click!</button>;

The console.log logs true on the frontend and false on the backend. And on the browser console I am getting this: Warning: Prop 'disabled' did not match. Server: "null" Client: "true" Warning: Prop 'disabled' did not match. Server: "null" Client: "true" .

In the React Chrome Extension I can see that the prop is actually set to true , so it should work. It only works if I force it to change to false and then back to true in the frontend.

This used to work with React.js 15.5.4 . What am I doing wrong / what changed in React.js 16 ?

Answer 1

After migrating to React.js 16 we started using hydrate for the frontend, and the element was not being updated, which is a expected behaviour.

The problem was actually in redux-form as reported here: https://github.com/erikras/redux-form/issues/2610

After adding a extra condition of pristine everything works fine now.