0

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>
    );
}
Jimmy
  • 995
  • 9
  • 18
  • Perhaps the url isn't providing the proper data... Can you validate the URL includes the team name with correct format? – silencedogood Jul 01 '21 at 14:30
  • @silencedogood when replace the **${teamName}** with actual value (e.g - **ABC** ) then correct results shown without any errors. – Jimmy Jul 02 '21 at 04:27
  • I understand that. Which is why I believe it's very likely that the `{teamName}` variable isn't being set correctly by the query string within the URL. – silencedogood Jul 02 '21 at 12:48
  • Thanks @silencedogood The **undefine** teamName in url is resolved by cleaning the browser. I didn't find any issue when I have changed the browser then, after just by clean the cookies from chrome the issues has been disappeared. – Jimmy Jul 05 '21 at 07:09

1 Answers1

1

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 ''

Sowam
  • 1,674
  • 3
  • 12
  • 30