0

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:

I keep getting the error above which I can't solve. React tells me the data on client and server side is different. This is because I've dynamically add rows on the render() function: 

render() {
    const projects = this.props.projects;
    const rows = [];

    for (const p in projects) {
        rows.push( <Project key={p} data={projects[p]} /> )
    }

    return (
        <section className="projects">
            <div className="container container--flex">
                {rows}
            </div>
        </section>
    );
}

The projects are coming from the state using Redux:

const mapStateToProps = state => ({
    projects: state.projects,
});

export default connect(mapStateToProps)(Projects);

So I'd start google the issue. The topic Warning: React attempted to reuse markup in a container but the checksum was invalid suggest to add an extra <div> around the elements, but this doesn't change a thing.

What is best practice for adding content dynamically?

Community
  • 1
  • 1
ronnyrr
  • 1,481
  • 3
  • 26
  • 45
  • is the value of `projects` equal on client and server-side? – Scarysize Sep 20 '16 at 12:42
  • Hmm good point. When I log projects it's undefined on server side (terminal) and an object on client side (chrome console). Any suggestion how this is possible? @Scarysize – ronnyrr Sep 20 '16 at 12:48
  • 1
    where does the data come from that will populate `projects`? Just for reference, read through my answer here, it might clarify things: http://stackoverflow.com/questions/39466316/react-can-be-used-on-server-side-rendering-what-does-that-mean/39476945#39476945 – Scarysize Sep 20 '16 at 12:50
  • Yes good point, I did forget to add the projects reducer to the store! Thanks ;) – ronnyrr Sep 20 '16 at 12:54

0 Answers0