CODEWITHSUNDEEP
reactjs
Unknown developer
Unknown developer

Reputation: 5930

Nested React element does not appear

I am very new to React and have the following query. Considering the code:

function Welcome(props:any) {
    return <h1>Hello, {props.name}</h1>;
}
function Sous() {
    return <h3>Under</h3>;
}

const element = <Welcome name="Jim" >
    <Sous/>
</Welcome>;
ReactDOM.render(element, document.getElementById('root'));

Why the browser returns only Hello Jim and ignores <Sous/>?

Upvotes: 1

Views: 66

Answers (1)

Dupocas
Dupocas

Reputation: 21317

Everything that goes inside a component instantiation is mapped to props.children. You need to explicitly specify an insertion point for children inside Welcome

function Welcome(props:any) {
    return <h1>Hello, {props.name}{props.children}</h1>;
}

Upvotes: 5

Related Questions