CODEWITHSUNDEEP
reactjsspring-bootuse-effectpath-parameter
Jimmy
Jimmy

Reputation: 1051

How to fetch pathParam value in useEffect in React JS

When I pass the teamName hard coded the correct results are showing but want to pass teamName from url using pathParam

Code:

export const TeamPage = () => {

    const [team, setTeam] = useState({matches :[]});

    
    const {teamName} = useParams();

    useEffect(
        ()=>{
            const fetchMatches = async() =>{
               
                const response = await fetch('http://localhost:8787/team/${teamName}');
                const data = await response.json();
                setTeam(data);
            };
            fetchMatches();
        },[]

    );
    console.log(teamName);
    if(!team || !team.teamName){
        return <h1>Team not found</h1>
    }

    return (
        <div className="TeamPage">
            <h1>{team.teamName}</h1>
        </div>
    );
}

Upvotes: 0

Views: 373

Answers (1)

Sowam
Sowam

Reputation: 1756

I am not sure but I think you are using wrong syntax, it should be:

const response = await fetch(`http://localhost:8787/team/${teamName}`);

so `` instead of ''

Upvotes: 1

Related Questions