React renders different values on client and server leading to checksum mismatch

Question

I am very new to react.Problem statement :The selected value is picked from json respose from the backend.The subscription with selected =true in json must remain selected on intial load and across navigations on the screen irrespective of client/server side:

Facing issue :bundle.js:1 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) on value="1234" data-reactid="290 (server) on value="1233" data-reactid="290

import React from 'react';


var restUtility = require('../utility/RestUtility');

export default class SummaryHeader extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

      value: []
    };
    this.state=this.props;
        this.handleChange = this.handleChange.bind(this);
    }




    handleChange(value) {
        this.setState(value);
        console.log('You have selected: ', value);
        this.setState({value});
        var rootUrl = restUtility.getRootURL();
        var requestUrl = rootUrl + '/rest/api/accountSummary/select';
        var request = new Request(requestUrl, {
            method: 'GET',
            // body: data, 
            headers: { 'subsID': ctnSelected }
        });
        event.preventDefault();

        fetch(request)
            .then(function () {
                console.log('Invoke rest API : ' + e.target.value);
            });
    }

    render() {
        var content;
        var ctnList = this.state.accountInfo[0].subsAssociations.map(function (subsAssociation, i) {
            if (subsAssociation.subscription.selected) {
                content=subsAssociation.subscription.serialNumber;
            }
            return <option key={i} >{content}</option>;

        });
        return (
            <div className="nameAreaWrapper">
                <div> <p style={{ fontSize: 13, float: "left" }}>Your here :</p> <p style={{ fontSize: 13, fontWeight: 700, marginRight: 20, paddingLeft: 5 }}>&nbsp;&nbsp;Account summary</p></div>
                <br />
                <div style={{ float: "left" }}><h1 style={{ color: '#EA3D17', fontSize: 40 }}>Hello {this.state.contactInfo.firstName}</h1></div>
                <div className="chooseNumber"><p style={{ float: "left", paddingRight: 10 }}><b>Choose your number</b></p>
                    <select className="dropDownStyle" name="MobileNumer" value={content} onChange={this.handleChange}>
                      {ctnList}
                    </select>
                </div>
            </div>
        );
    }
}



JSON:

 "subsAssociations": [
                  {
                    "uses": true,
                    "subscription": {

                      "serialNumber": "1234",
                      "selected": false
                    }
                  },
                  {
                    "uses": true,
                    "subscription": {
                      "subscriptionID": "1-50ZB4NR",
                       "selected": true
                    }


mainController.js

const express = require('express');
const router = express.Router();
import React from 'react';
import { renderToString } from 'react-dom/server';
import ReactDOM from 'react-dom';
import MainPage from './myaccount/MainPage';

/* GET home page. */
router.get('/', (req, res, next) => {

  // res.status(200).send('hello world');
  const markup = renderToString(<MainPage/>);
  return res.render('index', { markup });
});

module.exports = router;

index-static.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summary</title>
    <link rel="icon" href="./img/favicon.png">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="main"></div>
    <script src="/js/bundle.js"></script>
  </body>
</html>

vhariprakash · Answer 1 · 2017-11-20T17:44:00.423

This error is caused by webkit and Node rendering the ordering of values in an object differently. The easiest way to fix this is to make the order of the props in your JSX code match what the client rendering has.

This can be caused by a couple things, you fighting with Node for control of tags, or by a defect in a browser (e.g. Chrome).

To fix the Chrome defect, the only way I could get this to work was to install this polyfill (object-assign is also supposed to work, but did not for me):

npm install object.assign --save And add this to your Javascript code:

delete Object.assign; Object.assign = require('object.assign').shim();

try in multiple browser for behavior. The problem is with the sequence of the dropdown components. I also see (server) actid="289">

reference : https://www.garysieling.com/blog/fixing-react-attempted-reuse-markup-container-checksum-invalid

also add on http://jeffhandley.github.io/QuickReactions/19-isomorphic.html

React renders different values on client and server leading to checksum mismatch

1 Answers1