As React developers, we mainly work with JSX. But, after transpiling the code, JSX is entirely converted to pure JavaScript. Each component is created using React.createElement()
.
Consider the following code in JSX. It has a parent tag with 3 children.
<Student>
<Name>John Doe</Name>
<Age>36</Age>
<Gender>Male</Gender>
</Student>
We can see the output of JSX to JavaScript here. Here is the output:
"use strict";
/*#__PURE__*/
React.createElement(
Student,
null,
/*#__PURE__*/ React.createElement(Name, null, "John Doe"),
/*#__PURE__*/ React.createElement(Age, null, "36"),
/*#__PURE__*/ React.createElement(Gender, null, "Male")
);
As we can see, each child is passed to the parent React.createElement()
method as an argument. So, in this case we had to pass total 5 arguments to the parent createElement()
invocation.
We can also pass the three children as an array. That means, we are passing only 3 arguments in total and the third argument is an array.
"use strict";
/*#__PURE__*/
React.createElement(Student, null, [
/*#__PURE__*/ React.createElement(Name, null, "John Doe"),
/*#__PURE__*/ React.createElement(Age, null, "36"),
/*#__PURE__*/ React.createElement(Gender, null, "Male"),
]);
This is how we can use React.createElement()
to pass multiple child components.