I wanted to create element using React Component with child.
Here's my React Component:
const Element = () => {
return (
<div class='element'>/* child should be here*/</div>
);
}
export default Element;
and here's how I want to do it:
React.createElement(Element, {}, [
React.createElement('span', { className: 'text' }, 'text 1'),
React.createElement('span', { className: 'text' }, 'text 2')
])
output should be:
<div class="element">
<span class="text">text 1</span>
<span class="text">text 2</span>
</div>
Or am I doing it wrong?
There is a prop named children which contains the children in the component
so you can use
const Element = ({ children }) => {
return (
<div className='element'>{children}</div>
);
}
export default Element;
and the html property class should be className in react.