How dynamically create content for a react component, based on an array of varying size

Question

I am currently making a website for one of my friends to calculate some values for a video game, and I am trying to make a display that shows some modifiers of each of the countries that I pull from my database. All of the modifiers are stored, in order, from a 2D array in the database, and each set of modifiers is separated in their own arrays within that 2D array. I am trying to display it with the Popover component from Ant Design, I am required to put the information within a <div> or other React Component, and I would like to separate each section with a <p> or <Paragraph> tag for formatting. The problem I am having is that the modifiers array that I pull varies in length, so I must have the HTML or React code dynamically generate the formatting I require, and I am unsure how to do this. The array is organized with the name of the modifier [String], and then in the next index the value of the modifier [Numerical]. Below I have listed my code for the component, the way the array is formatted for the modifiers, and my preferred way to display it. Any help would be fantastic!

Component Code:

<Popover placement="right" title={"First Idea"} content={[THIS IS WHERE THE HTML/REACT GOES]}>
     <Button> First Idea </Button>
</Popover>

Array Example:

ideaSet = ["legitimacy", 1, "possible_policy", 1]

Preferred Organization:

<div style={{...}}>
<p>
{[Name of Modifier] + ": " + [Modifier Value]}
</p>
...Do the above for however many modifiers there are (not sure how with ReactJS).
</div>

Michael.Lumley · Accepted Answer · 2020-09-04 21:15:16Z

1

Use .map on your array and return the <p>.

return this.props.ideaSet.map((idea) => <p>{your implementation}</p>)

answered Sep 4, 2020 at 21:15

Michael.Lumley

2,3842 gold badges32 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

How dynamically create content for a react component, based on an array of varying size

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related