Cannot render an array in React.JS-CodePudding

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.stack.imgur.com/ym8u7.png

CodePudding user response：

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>
  )}
)}