Question 381706 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Output List in JSX

I am trying to output a HTML list in JSX.

Here is how I build the array:

let seasonsList = [];

for (var i=0; i < jsonData.data.campaigns.list.length; i++) {
    seasonsList.push(<li key={i}>{jsonData.data.campaigns.list[i].name}</li>);
}

When I try to output this list I get nothing inside the ul tags

return (
    <ul>{seasonsList}</ul>
);

How can I output the list of names inside the ul tags?

Tags:

2

Answers


  1. 0
    • make sure your jsonData.data.campaigns.list contains the expected data

    instead using for loop you should try this appraoch

    let seasonsList = jsonData?.data?.campaigns?.list?.map((campaign, index) => (
  <li key={index}>{campaign.name}</li>
));

return <ul>{seasonsList}</ul>
    Login or Signup to reply.
  2. 0

    you can try with the below code and also make sure that the index which you are passing as a key prop to the

  3. tag
    4. const seasonsList = jsonData?.data?.campaigns>.list?.map((campaign, index) => (
  <li key={index}>{campaign.name}</li>
));

return (
  <ul>{seasonsList}</ul>
);

    if still the problem exist then try with passing some unique values which is coming from the data you get in the key prop in

  4. tag for example :
    5.  <li key={campaign.id}>{campaign.name}</li>
Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search