CODEWITHSUNDEEP
javascriptarraysreactjs
Angle-Brackets
Angle-Brackets

Reputation: 57

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

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>

Upvotes: 0

Views: 120

Answers (1)

Michael.Lumley
Michael.Lumley

Reputation: 2385

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

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

Upvotes: 1

Related Questions