title: How can I redirect to a component and set an initial state using redux and react?
body: <p>I have a component that has a html button that when clicked on needs to add a string to an array in a redux reducer and then redirect and render another component initializing it with this state with passed in from the original component. When I click the button it get the correct string I want and console.log(pro) I get the string from the original component I'm setting the state from and I need to initialize the state of the member component with this screen but the page doesn't load. The component I'm using works when I hard code the string in and redirect with the route in the same way.</p>
  <p>The original component looks like this</p>
  <pre><code>const Posts = (props) =&gt; {
    const dispatch = useDispatch();
  
  
    const getProfile = async (member) =&gt; {
      const addr = await dispatch({ type: 'ADD_MEMBER', response: member })
      console.log(member)
    props.history.push('/member'
    );
  
    const socialNetworkContract = useSelector((state) =&gt; state.socialNetworkContract)
  
    return (
        &lt;div&gt;
          {socialNetworkContract.posts.map((p, index) =&gt; {
            return &lt;tr key={index}&gt;
      &lt;button onClick={() =&gt; getProfile(p.publisher)}&gt;Profile&lt;/button&gt;
          &lt;/tr&gt;})}
        &lt;/div&gt;
    )
  }
  
  export default Posts; 
  </code></pre>
  <p>The component I'm trying to render is</p>
  <pre><code>const Member = (props)=&gt; {  
    const [user, setUser] = useState({});
    const { state } = props.location;
    //const { state } = props.history.location;
  
  // update user state when route state updates
  useEffect(() =&gt; {
    if (state &amp;&amp; state.user) {
      setUser(state.user);
    }
  }, [state]);
  
  // run effect when user state updates
  useEffect(() =&gt; {
    const doEffects = async () =&gt; {
      try {
      
  
  
    const socialNetworkContract = useSelector((state) =&gt; state.socialNetworkContract)
  
    useEffect(async()=&gt;{
      try {
       await setUser(state.user)
              console.log(user)
              console.log(user)
        const pro = socialNetworkContract.members[0]
          console.log(pro)
        const p = await incidentsInstance.usersProfile(pro, { from: accounts[0] });
        const a = await snInstance.getUsersPosts(pro, { from: accounts[0] });
  
  
      } catch (e) {
        console.error(e)
      }
    }
  
    doEffects();
  }, [user]);
  </code></pre>
  <p>The route looks like this</p>
     
  <p>Even though it compiles in my terminal without an error when I click on the button I get this error in my browser.</p>
  <pre><code>src/components/posts/posts.js:69
    66 | const getProfile = async (member) =&gt; {
    67 |   const addr = await dispatch({ type: 'ADD_MEMBER', response: member })
    68 |   console.log(member)
  &gt; 69 | props.history.push('/member'
       | ^  70 | //{
    71 |  // pathname: '/member',
    72 | //  state: {
  View compiled
  </code></pre>
  <p>This is my routes.js file</p>
  <pre><code>const Routes = () =&gt; {
    return (
        &lt;Switch&gt;
          &lt;Route path=&quot;/posts&quot; exact component={Posts} /&gt;
        &lt;Route path=&quot;/member&quot; exact component={Member} /&gt; 
          &lt;Redirect exact to=&quot;/&quot; /&gt;
        &lt;/Switch&gt;
    )
  }
  
  export default Routes
  </code></pre>