React dynamically adding html elements/

Question

I'm new to React. I currently have a component. This component has a title and a body. The body can have several paragraphs and I want to dynamically add the elements depending on how many paragraphs each has. So right now I have this:

import React from 'react';

class Content extends React.Component{
    render(){
        var props_list = this.props;
        var keys = Object.keys(props_list);
        console.log(props_list["title"]);

        for (var i = 0; i < keys.length; i++){
            console.log(props_list[keys[i]]);
        }

        return (
            <div className="introduction">
                <h3>{props_list["title"]}</h3>
                <div className="div-content">

                </div>
            </div>
        );
    }
}

export default Content;

Now with this code I can get all the props and information that it's added to each component but I have no clue how to add this information dynamically into the div-content.

Thank you in advance!

It is not clear what you want each paragraph to look like, or what collection of things you want to display. Are you trying to display each of the non-title props and their values? — GregL
– GregL, Commented Dec 21, 2019 at 1:23
You can render an array of html elements, components, and primitives — Andrew
– Andrew, Commented Dec 21, 2019 at 1:24

FujiRoyale · Accepted Answer · 2021-09-05 13:03:11Z

1

So. If we could know more about the shape of the props passed into this component it would help but this should be enough to get you going.

import React from 'react';

class Content extends React.Component{
   render(){
    var props_list = this.props;
    var keys = Object.keys(props_list);
    console.log(props_list["title"]);
            const paragraphs = [];
    for (var i = 0; i < keys.length; i++){
        console.log(props_list[keys[i]]);
        // This part is to make sure you are not re-rendering your title.
        if(keys[i] !== "title"){
            paragraphs.push(<p>{props_list[keys[i]]}</p>);
        }      
    }

    return (
        <div className="introduction">
            <h3>{props_list["title"]}</h3>
            <div className="div-content">
              {paragraphs}
            </div>
        </div>
    );
 }
}

edited Sep 5, 2021 at 13:03

answered Dec 21, 2019 at 2:32

FujiRoyale

84212 silver badges26 bronze badges

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

2 Comments

pikachungg Over a year ago

Thank you so much. This works perfectly however you have to add {props_list[keys[i]]} or it won't render as a variable.

FujiRoyale Over a year ago

excellent. Glad it worked. I'll edit the above.

Collectives™ on Stack Overflow

React dynamically adding html elements/

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related