title: Pass props returned by login into props.history.push function
body: <p>I have a React, express, mongo application that I am working on and I am wanting to get the pets for a specific user after they have logged in. I am not sure how I should retrieve the username from the logged in user and then pass it into my PetListing component. I have tried a few things, but I am unsure of what I am doing wrong.</p>
  <strong>Login component:</strong>
  <pre class="lang-js prettyprint-override"><code>    import React, {Component, useState} from 'react';
      const LoginForm = (props) =&gt; {
          const [state, setState] = useState({
              username: '',
              password: '',
          });
      
          const onSubmit =(event)=&gt;{
              event.preventDefault();
              fetch('http://localhost:4000/login', {
                  method:'POST',
                  body: JSON.stringify(state),
                  headers:{
                      'Content-Type':'application/json'
                  }
              })
              .then(res =&gt; {
                  if(res.status === 200){
                      props.history.push('/pets');
                      state
                  } else {
                      const error = new Error(res.error);
                      throw error;
                  }
      
              })
              .catch(err=&gt; {
                  console.log(err);
                  alert(&quot;Error when logging in.&quot;)
              })
      
              
          };
         const handleInputChange = (event) =&gt; {
              const {value, name} = event.target;
              setState((prevstate)=&gt; ({
                  ...prevstate,
                  [name]:value
              }));
          };
  </code></pre>
  <strong>Pet listing component</strong>
  <pre class="lang-js prettyprint-override"><code>    import React from 'react';
      
      
      import axios from 'axios';
      
      export default class PetListing extends React.Component{
          state= {
              username : '',
              pets: []
          }
      
      
          componentDidMount(){
              axios.get(`http://localhost:4000/pets/${this.state.username}`)
              .then(res=&gt;{
                  console.log(res);
                  console.log(res.data);
              })
          }
      
          render()
      {
          return(
              &lt;ul&gt;
                  {this.state.pets.map(tickets =&gt; &lt;li&gt;{pets.pet_id}&lt;/li&gt;)}
              &lt;/ul&gt;
          )
      }
  }
  </code></pre>
  <strong>App.js</strong>
  <pre class="lang-js prettyprint-override"><code>&lt;Nav className=&quot;justify-content-end&quot;&gt;
                &lt;Nav&gt;
                  &lt;Link to={&quot;/pets/{username}&quot;} className=&quot;nav-link&quot;&gt;
                    View your pets
                  &lt;/Link&gt;
                &lt;/Nav&gt;
  </code></pre>