title: Warning: Did not expect server HTML to contain a <li> in <ul>. in React/Redux Server side Rendering
body: <p>I am doing Server Side Rendering for the first time with React and Redux and seeming to be having a little difficulty. I am getting the warning:</p>
  
  <p><code>Warning: Did not expect server HTML to contain a &lt;li&gt; in &lt;ul&gt;.</code></p>
  
  <p>I have looked this up and it means that there is a html tree mismatch. I am not sure how that is. Is there an obvious way to fix it? Here is the code I have that is throwing the warning.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import actions from '../actions';
  
  class UsersList extends Component {
    componentDidMount() {
      if (this.props.users.length &gt; 0) {
        return;
      }
      this.props.fetchUsers();
    }
  
    render() {
      const { users } = this.props;
      return (
        &lt;div&gt;
          &lt;ul&gt;
            {users.map(user =&gt; {
              return &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;;
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const stateToProps = state =&gt; {
    return {
      users: state.users
    };
  };
  
  const dispatchToProps = dispatch =&gt; {
    return {
      fetchUsers: () =&gt; dispatch(actions.fetchUsers())
    };
  };
  
  const loadData = store =&gt; {
    return store.dispatch(actions.fetchUsers());
  };
  
  export { loadData };
  export default connect(stateToProps, dispatchToProps)(UsersList);
  </code></pre>
  
  <p>Here is the client.js:</p>
  
  <pre><code>// Startup point for the client side application
  import 'babel-polyfill';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import { Provider } from 'react-redux';
  import { renderRoutes } from 'react-router-config';
  
  import Routes from './Routes';
  import reducers from './reducers';
  
  const store = createStore(reducers, {}, applyMiddleware(thunk));
  
  ReactDOM.hydrate(
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;,
    document.querySelector('#root')
  );
  </code></pre>