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

Question

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?

The Element component is not rendering its children. (stackoverflow.com/questions/65674663/… this should help) — evolutionxbox
– evolutionxbox, Commented Sep 3, 2021 at 14:51

Gabriele Petrioli · Accepted Answer · 2021-09-03 14:56:33Z

4

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.

edited Sep 3, 2021 at 14:56

answered Sep 3, 2021 at 14:51

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related