Build react element as string

Question

I'm trying to dynamically build a React element.

    let section = <span>Home> {header.section}</span>
    ...
    section += <span> > {location.title}</span>

    return (section)

If I don't try and add anything it works fine, when I do the above I get [object Object][object Object]

How do I go about building a React element dynamically?

Giang Le · Accepted Answer · 2018-05-29 01:34:12Z

2

you can try this

let section = [<span key={1}>Home> {header.section}</span>]
....
section.push(<span key={2}> {location.title}</span>)

return section

and in and in render

<div>{section}</div>

answered May 29, 2018 at 1:34

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

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

Comments

Johnson Samuel · Accepted Answer · 2018-05-29 03:43:12Z

0

You can declare section with empty array and keep pushing the elements you want to and then use map to render it :)

   ######### Process data here #########
   let section = [];
   section.push(<span>Home > Company Name</span>);
   section.push(<span>About us > Company Features</span>);

    ######### To render using map  #########
   const renderSection = section.map((val, idx) =>{
        return (val);
    })


    ######### To Display  #########
  {renderSection}

Hope this helps :)

answered May 29, 2018 at 3:43

Johnson Samuel

2,0862 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

Build react element as string

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related