How can we insert elements dynamically

[Heaven]

For example:

props.providedElement
? <div className="a">
      <span>aaaa</span>

      {props.providedElement}
  </div>
: <div className="a">
    <span>aaaa</span>

    <button>bbbb</button>

    <input className="ccc" />
  </div>

At now,the <div className="a"><span>aaaa</span></div> part is repetitive,but I can't write something like:

<div className="a">
    <span>aaaa</span>

    {props.providedElement || 
       <button>bbbb</button>

       <input className="ccc" />    
    }
</div>

This will cause syntax error,but we can't wrap the element like:

<div className="a">
    <span>aaaa</span>

    {props.providedElement || 
       <div>
           <button>bbbb</button>

           <input className="ccc" />    
       </div>
    }
</div>

because it will break the construction of html,maybe we need to do some extra work to fix it or it just can't be fixed.

Maybe we can do this:

<div className="a">
    <span>aaaa</span>

    {props.providedElement || 
        [<button>bbbb</button>, 
         <input className="ccc" />
        ]
    }
</div>

But it is a little difficult to read and maintenance.So,I want to ask is there any good way to solve this?

[Andreas Svensson]

<div className="a">
    <span>aaaa</span>

    {props.providedElement || 
        [<button>bbbb</button>, 
         <input className="ccc" />
        ]
    }
</div>

Copied from you, that is how you do it for now, or using https://facebook.github.io/react/docs/create-fragment.html (functionally the same, but React-specific for now). Fragments will probably get their own syntax in the no to distant future which should much more natural (discussed in various places #65 (comment)).

[Heaven]

Yup,seems like JSX can't solve this in syntax level at least now,I will use createFragment instead for now,thanks for your advice.