Carl Ortiz
Carl Ortiz

Reputation: 465

How to create React element using React.createElement with child?

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?

Upvotes: 1

Views: 2414

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

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.

Upvotes: 4

Related Questions