title: Persist Material-UI Selections With Redux Data
body: <p>I'm trying to implement a Material-UI Select component with data from Redux, to allow the selections to persist across refreshes.</p>
  
  <p>I've got two arrays of data inside of Redux: the <code>sourceTags</code> array, which is my list of clickable menu options, and my <code>selectedTags</code> array, which includes the selected options (those the user has clicked). The api for the Material-UI component is <a href="https://material-ui.com/api/select/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The component looks like this:</p>
  
  <pre><code>import React, { useEffect, useState } from 'react';
  import { Select, Input, MenuItem } from "@material-ui/core";
  import { useDispatch, useSelector } from "react-redux";
  import { setTags } from "../actions/search";
  
  const MultiChipSelect = ({ source }) =&gt; {
  
      const dispatch = useDispatch();
      const selectedTags = useSelector(state =&gt; state.search.tags);
      const sourceTags = useSelector(state =&gt; state.settings[source].tags);
  
      const handleTagClick = async (e) =&gt; {
          dispatch(setTags(e.target.value)); // Sets my searchTags list in Redux.
          // The e.target.value is an array of objects, or an empty array.
  
      };
  
      return (
          &lt;Select
          multiple
          value={selectedTags}
          onChange={handleTagClick}
          input={&lt;Input id="select-multiple" /&gt;}
          &gt;
          {sourceTags.map(val =&gt; (
              &lt;MenuItem key={val._id} value={val}&gt;
              {val.data}
              &lt;/MenuItem&gt;
          ))}
          &lt;/Select&gt;
      );
  }
  
  export default MultiChipSelect;
  </code></pre>
  
  <p>The component works, at least partially. Here's what it looks like when I make a selection:</p>
  
  <p><a href="https://i.stack.imgur.com/XGTLk.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XGTLk.gif" alt="enter image description here"></a></p>
  
  <p>The redux store is also updating correctly. Happy to share the action generator and reducer but that's not the problem.</p>
  
  <p>The problem is, when I refresh the page, the selectedTags array does not display in the component. The objects do appear inside the select component, but aren't showing up:</p>
  
  <p><a href="https://i.stack.imgur.com/btnkC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/btnkC.png" alt="enter image description here"></a></p>
  
  <p><strong>How can I restructure this Material-UI component to pull in data from my Redux store correctly, and persist the displayed selection across refreshes, rather than relying on the <code>useState</code> hook that does not, as per the examples?</strong></p>
  
  <p>For context, here's what one would look like using the <code>useState</code> hook. Keep in mind that this doesn't persist the selections across refreshes:</p>
  
  <pre><code>import React, { useState } from 'react';
  import { Select, Input, MenuItem } from "@material-ui/core";
  import { useSelector } from "react-redux";
  
  const MultiChipSelect = ({ source }) =&gt; {
  
      const sourceTags = useSelector(state =&gt; state.settings[source].tags);
      const [tags, setTags] = useState([]);
  
      const handleTagClick = async (e) =&gt; {
          setTags(e.target.value); // Sets my tags list.
      };
  
      return (
          &lt;Select
          multiple
          value={tags}
          onChange={handleTagClick}
          input={&lt;Input id="select-multiple" /&gt;}
          &gt;
          {sourceTags.map(val =&gt; (
              &lt;MenuItem key={val._id} value={val}&gt;
              {val.data}
              &lt;/MenuItem&gt;
          ))}
          &lt;/Select&gt;
      );
  }
  
  export default MultiChipSelect;
  </code></pre>