How to see nested react component

Question

When I see sample react component usecase,for example following is listed. But I have questions.<App /> means some react component and it has some html element. But regarding <Theme></Theme> , it is also react component. but why this is different writing form from <App />? what is the difference between them?

    <BrowserRouter>
      <Theme>
        <App />
      </Theme>
    </BrowserRouter>

I am totally novice of React,and search them but I still have unclear about it. If someone has materials relating that. Will you please let me know

thanks

not sure if this waht u were looking for stackoverflow.com/questions/48991212/… — cmgchess
– cmgchess, Commented Feb 10, 2022 at 8:24
React is structured like HTML, you can put components inside of other components for readability and reusability. — Djave
– Djave, Commented Feb 10, 2022 at 8:25

Wraithy · Accepted Answer · 2022-02-10 08:27:07Z

1

If you define component that have children in props, you should use it as pair tag, and whatever is inside of it, its passed to props.children. In your example imagine that Theme can look somehow like this:

const Theme = ({children}) =>{
return <div style={{backgroundColor: red, color: blue}}>
 {children} //this is where <App /> is rendered in your case
</div>
}

answered Feb 10, 2022 at 8:27

Wraithy

2,0961 gold badge7 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to see nested react component

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