Server rendering warnings too vague

[lostpebble]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

While server rendering React DOM and then hydrating with a different structure, React rightly warns that there are inconsistencies. But when I first saw these warnings I was not sure exactly what was going wrong.

Here are a few of the warnings I have been receiving:

Warning: Did not find a matching <button> in <div>.

Warning: Did not find a matching <img> in <div>.

Warning: Did not expect server HTML to contain a <div> in <div>.

Only on that last error did I catch on that this was a problem with server-rendering and the inconsistencies between that and my client render (intentional at the moment while testing some things in unpure render functions).

What is the expected behavior?

Being more explicit that this was a rendering inconsistency between server and client.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React v16-beta.1

[gaearon]

Thanks for the report. Would you like to send a PR with a wording you feel would be more appropriate?

[mqliutie]

render () {
    return <ul>123</ul>;
}

There is no warning

render () {
    return <ul>{this.state.data.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>
}

There is an warning warning.js:33 Warning: Did not expect server HTML to contain a <li> in <ul>.

Why is this happening and how can I avoid this warning ?

Thanks

[gaearon]

@mqliutie We can't help without a reproducing case.

[gaearon]

But it likely means that this.state.data was empty on the client, but not empty on the server.

[mqliutie]

@gaearon Thanks for your reply, you are right!
It's my fault.