What are the differences between the two functions?

Question

app.js

import React from 'react';
import ClubDetail from './ClubDetail';

class ClubList extends React.Component {

    changeJSX() {
        return this.props.clubs.map((club) => {
            return (
                <div key={club.usid}>
                    <ClubDetail 
                        clubName={club.name} 
                        />
                    <button 
                        className="ui teal basic button"
                        onClick={(event) => this.props.findClub(event, 
                        club.name)}>
                    View</button>
                    <button 
                        className="ui violet basic button"
                        onClick={(event) => 
                        this.props.findMembership(event, club.name)}>
                    Membership</button>
                </div>
            );
        })
    }

    render() {
        return (
            <div className="ui secondary vertical pointing menu">
                {this.changeJSX()}
            </div>
         );

    }
};

export default ClubList;

this is my app.js file. I would like to use the findClub function and findMember function here. The above functions exist in the parent component.

---

import axios from ('axios');
...
    findClub = async (event, id) => {
        console.log(id);
        const findClub = await axios.get('/club/club/', {
            params: {
                name : id
            }
        }).then(response => {
            let club = response.data.findclub;
            this.setState({clubName: club.name , clubIntro: club.intro, 
            seleted: 'create'});
        });
    }

    findMembership = async (event, id) => {
        console.log(id);
        const findMembership = await 
        axios.get('/clubMembership/clubMembership', {
            params: {
                name : id
            }
        }).then(response => {
            console.log('findMembership is here')
        })
    }
    ...

Among the above two functions, console.log(id); in findClub has a return value, but console.log(id) in undMembership has no return value.

Answer 1

The async await pattern is not applied consistently in your example.

Basically the idea is that you can write those then chains like synchronous code:

const response = await axios.get('/club/club/', {
    params: {
        name : id
    }
});

let club = response.data.findclub;
this.setState({clubName: club.name , clubIntro: club.intro, seleted: 'create'});

In this case you would use the return value of the await call.