How to concatenate JSX elements into an array?

Question

Frustrating times in React world... I need to be able to create markup based on certain criterias. For example, I receive an array of items. I need to check these items, and based on criteria, I need to generate different markup. So for example, I have a function that receives an array of items:

processItems(itemArray) { // Create an empty array that will hold the final JSX output. let buffer = [] // Somehow push the first required markup into the buffer. buffer.push(<div className"container flex center">); // ... here we do a switch statement that evaluates each item in the 'itemArray' argument and based on that I create different <div className="XYZ">{...put stuff here...}</div> markup, which I will push into the buffer - which will contain the final JSX output... // Now I close the initial container element buffer.push(</div>); // And return the buffer for display inside the render() function return buffer; }

The problem is, I cannot simply do array.push() to add individual markups into an array because react doesn't like it for some reason, and I will just end up with gibberish stuff that gets display.

Any ideas how could I possibly do this?

"I cannot simply do 'array.push()' to add individual markups into an array because react doesn't like it for some reason," It's the same reason you cannot create half of a DOM element. JSX is not concatenating strings to build HTML, it's creating components which ultimately render to DOM elements. If you look at what JSX is converted to it will hopefully make more sense. Paste: <div><span>foo</span></div> in here: babeljs.io/repl/… . — Felix Kling
– Felix Kling, Commented Nov 7, 2016 at 22:52
Did you ever get this to work? I am trying to do a similar thing. Inside a parser, building JSX depending on the content of a JSON object. — Addinall
– Addinall, Commented Aug 3, 2017 at 5:55

zerkms · Accepted Answer · 2016-11-07 23:26:53Z

87

Your solution should look like this:

processItems(itemArray) { // Create an empty array that will hold the final JSX output. let buffer = [] buffer.push(<div>A</div>); buffer.push(<div>B</div>); buffer.push(<div>C</div>); // And return the buffer for display inside the render() function return ( <div className"container flex center"> {buffer} </div> ); }

JSX is not HTML and you cannot assemble the html elements in multiple steps.

edited Nov 7, 2016 at 23:26

answered Nov 7, 2016 at 22:50

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

10 Comments

pentool Over a year ago

Yes, my solution does look like that at the end, in the sense that in the render() function I do display {buffer} between a div. But I think my problem is what you pointed out, that I was somehow hoping/wanted to assemble the final output/html by pushing the contents into an array first. Which apparently not possible. Sigh...

pentool Over a year ago

I guess what I don't understand is that in render() I can use any number of HTML elements to display, as long as they sit between an outermost div. On this notion, why can't I just simply put all those HTML elements into a variable or an array, and display that inside the outermost div? That's basically what I'm trying to do.

zerkms Over a year ago

@pentool you can.

pentool Over a year ago

Would you be so kind and post a quick example? I've been trying to do this in the past 5 hours and regardless how I slice it, it just simply doesn't work.

pentool Over a year ago

Ah, I see! So basically you have to push items into the array with both the opening and a closing div.

|

Collectives™ on Stack Overflow

How to concatenate JSX elements into an array?

1 Answer 1

10 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Linked

Related