Cannot render an array in React.JS

Question

I can't get my two arrays to add a label and the label description. It all seems to mesh together. I have the JSON data in a database imported as "db" all of it comes messed together. [![This is the image to see I don't know if I'm explaining right new to react][1]][1]

  
    "title_FQA":  "What Statuses are Used for Projects?",
    "tag_FQA": [ "Critical", "High", "Medium", "Low"],
    "description_FQA": ["New products or functionality affecting customer usage with confirmed public release date within 30 days.",
    "New products or functionality affecting customer usage with confirmed public release date within 90 days.",
    "Enhances functionality or streamlines business processes, but is not required.",
    "Modify appearance of screens, terminology, or customize base system applications for cosmetic purposes."
    ]

/////////////////////React Code /////////////////

        <Grid paddingTop={3} container justifyContent="space-evenly">
      {db.map((post) => {
        return (
          <Widget>
            <Typography paddingBottom={3} variant="h3">
              {post.title_FQA}
            </Typography>
            <Grid>
            {post.tag_FQA}
            {post.description_FQA}
            </Grid>
            </Widget>
            </Grid>




    


  [1]: https://i.sstatic.net/ym8u7.png

Welcome to Stack Overflow. Please see how to ask and how to create an example. — Nikki9696
– Nikki9696, Commented Jan 27, 2022 at 20:07

Remy Smith · Accepted Answer · 2022-01-27 20:30:00Z

2

If I'm understanding correctly, you will need to specify which items in each tag and description array to display, for example:

{post.tag_FQA[0]}
{post.description_FQA[0]}

Would return:

Critical

New products or functionality affecting customer usage with confirmed public release date within 30 days.

{post.tag_FQA[1]}
{post.description_FQA[1]}

Would return:

High

New products or functionality affecting customer usage with confirmed public release date within 90 days.

For a little more automation, add another map function to iterate over the tag and description arrays withing each post:

{db.map((post) => {
  return (
    <Widget>
      <Typography paddingBottom={3} variant="h3">
        {post.title_FQA}
      </Typography>
      {post.tag_FQA.map((tag, index) => 
        <Grid>
          {tag}
          {post.description_FQA[index]}
        </Grid>
        )
      }
    </Widget>
  )}
)}

answered Jan 27, 2022 at 20:30

Remy Smith

1264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Over a year ago

Thank you sorry for my improper formatting but thank you for understanding and your help it works!

Collectives™ on Stack Overflow

Cannot render an array in React.JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related