Injecting JSX

[electic]

How would I inject JSX into a parameter. As an example:

Here is my JSX code:

<ReactPaginate 
            breakClassName='{"page-item"}'
            pageClassName='{"page-item"}'
            breakLabel="(<a></a>)"
            breakClassName='{"page-link"}'
            previousClassName='{"page-item"}'
            nextClassName='{"page-item"}'
            pageLinkClassName='{"page-link"}'
            previousLinkClassName='{"page-link"}'
            nextLinkClassName='{"page-link"}'
            containerClassName='{"pagination"}'
            pageCount="{22}" 
            pageRangeDisplayed="{5}" 
            marginPagesDisplayed="{5}" 
        />

The breakLabel requires a node as a parameter. Here is how it would be if I wrote it in JSX:

         <ReactPaginate
            breakClassName="page-item"
            breakLabel={<a className="page-link">...</a>}
            pageClassName="page-item"
            previousClassName="page-item"
            nextClassName="page-item"
            pageLinkClassName="page-link"
            previousLinkClassName="page-link"
            nextLinkClassName="page-link"
          />

Any help appreciated.

[p3pp8]

@electic The only way i discovered is to use React.createElement(el,props,child). So for instance:

 <ReactPaginate
            breakClassName="page-item"
            breakLabel={React.createElement('a', {className:'page-link'}, '...')}
            pageClassName="page-item"
            previousClassName="page-item"
            nextClassName="page-item"
            pageLinkClassName="page-link"
            previousLinkClassName="page-link"
            nextLinkClassName="page-link"
          />

Where child can be a inner text(as the example) or in turn another React created element...

Hope it'll be useful... Cheers

[electic]

Yah this is what I was afraid of. Thanks for letting me know though!