React component in another component - reactjs

Question

I'm beginner in React, but have to ask this question because I can't find answer
This is my code
class UserLogin extends React.Component{
render(){
const {title} = this.props
return(
<p> {title} </p>
);
}
}
class UserGuide extends React.Component{
render(){
return(
<p> Test class </p>,
<UserLogin title = "Nexicolt" />
);
}
}
ReactDOM.render(
<UserGuide/>,
document.getElementById('app')
);
Output is
Nexicolt
not
test class
Nexicolt
Why ?

Answer 1

Notice that a comma after <p> is located outside JSX, so it's JavaScript syntax and not HTML text node.
Comma operator ignores the first part of an expression, <p> Test class </p>, and returns only the second part from render functon, <UserLogin title = "Nexicolt" />.
If there are multiple children elements, either an array should be returned:
return [
<p> Test class </p>,
<UserLogin title = "Nexicolt" />
];
Or a fragment:
return <>
<p> Test class </p>
<UserLogin title = "Nexicolt" />
</>;
If you are not sure you have good uses for comma operator, ESLint no-sequences rule can be used to prevent it from being used and avoid potential mistakes.

Answer 2

If you are using React 16.* then you can use fragment:
return <>
<p> Test class </p>
<UserLogin title = "Nexicolt" />
</>;
or return array
return [
<p> Test class </p>,
<UserLogin title = "Nexicolt" />
];
and if you are using React below 16 then wrap it inside div as follows:
return (
<div>
<p> Test class </p>,
<UserLogin title = "Nexicolt" />
</div>
);

Answer 3

You are having Comma operator in the render function, it will only take the last part of the render function.
<p> Test class 1</p>,
<UserLogin title = "Nexicolt" />,
<p> Test class 2</p>
This will return the result 'Test class 2'.