To use components with React, add the component tag via React’s render and call Component.render() when the React component has mounted:

componentDidMount () {
render () {
return <component data-key="mladl" data-load="md-mi"></component>

Because React does not handle “custom” attributes like key and load, use data-key and data-load instead. React also requires you to use quotation marks (") for attributes.

You can use Component.render() by itself or with a callback or promise. See the section on Component.render for more.


Rendering multiple components

You can render multiple components the same way as a single component. However, React does require that its internal render function returns a single element. So to render multiple Component IO components in a single React component, you can wrap them in a common element such as a <div>, like so:

render () {
return (
<component data-key="mladl" data-load="md-mi"></component>
<component data-key="ekaob" data-load="b"></component>
<component data-key="aldlk" data-load="md"></component>


You can call Component.render() as often as you’d like in your React component (or elsewhere). This method will not lead to an API call every time; if a component has already been fetched once, Component.render() will use that data instead of making another API call.

See the section on Component.render for more.