How to pass props returned by a login, into another component's axios get call

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.

Login component:

    import React, {Component, useState} from 'react';
    const LoginForm = (props) => {
        const [state, setState] = useState({
            username: '',
            password: '',
        });
    
        const onSubmit =(event)=>{
            event.preventDefault();
            fetch('http://localhost:4000/login', {
                method:'POST',
                body: JSON.stringify(state),
                headers:{
                    'Content-Type':'application/json'
                }
            })
            .then(res => {
                if(res.status === 200){
                    props.history.push('/pets');
                    state
                } else {
                    const error = new Error(res.error);
                    throw error;
                }
    
            })
            .catch(err=> {
                console.log(err);
                alert("Error when logging in.")
            })
    
            
        };
       const handleInputChange = (event) => {
            const {value, name} = event.target;
            setState((prevstate)=> ({
                ...prevstate,
                [name]:value
            }));
        };

Pet listing component

    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=>{
                console.log(res);
                console.log(res.data);
            })
        }
    
        render()
    {
        return(
            <ul>
                {this.state.pets.map(tickets => <li>{pets.pet_id}</li>)}
            </ul>
        )
    }
}

App.js

<Nav className="justify-content-end">
              <Nav>
                <Link to={"/pets/{username}"} className="nav-link">
                  View your pets
                </Link>
              </Nav>

121 thoughts on “How to pass props returned by a login, into another component's axios get call”

  1. Very good blog! Do you have any tips and hints for aspiring writers?
    I’m planning to start my own blog soon but I’m a little lost on everything.
    Would you propose starting with a free platform like WordPress or go for a
    paid option? There are so many choices out there that I’m
    totally confused .. Any ideas? Appreciate it!

    Reply
  2. Hola! I’ve been reading your site for a while now and finally got
    the bravery to go ahead and give you a shout out from Kingwood Texas!
    Just wanted to say keep up the fantastic job!

    Reply
  3. I’m not that much of a online reader to be honest but your blogs really nice,
    keep it up! I’ll go ahead and bookmark your website to come back down the road.
    Many thanks

    Reply
  4. It’s appropriate time to make a few plans for the longer term and it’s time
    to be happy. I have learn this publish and if I may just I wish
    to counsel you few attention-grabbing issues or advice.
    Perhaps you can write subsequent articles regarding this article.

    I desire to read more things approximately it!

    Reply
  5. Hi, I think your blog might be having browser compatibility issues.

    When I look at your website in Safari, it looks fine but
    when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that,
    amazing blog!

    Reply
  6. You really make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand.
    It seems too complex and very broad for me. I am
    looking forward for your next post, I will try to get the hang of
    it!

    Reply

Leave a Comment