How to create a container component from other components

Question

Good afternoon!

I’m trying to create a component that contains Ivs that stylize the components inside. Only there are 3 Ivs and I don’t want to replicate them every time I go to use, so I thought of creating a component that stores them and summarize me in only one line all 3.

export default class Container extends React.Component {
render() {
    return (
        <div className="container-fluid">
          <div className="row">
            <div className = "col-12 mt-3">
              /* INSERIR O CONTEUDO AQUI */
            </div>   
          </div>
        </div>  
    );
  }
}

Where you are inserting content is where the components of what I inserted before should be, such as the Title component.

export default class Index extends React.Component {   
render() {
  return (
    <div>
        <MainStyle pageTitle = {"Resumo do Monitoramento"}/>
        <Navbar /> 
        <Container>
          <Title primary="Index" secondary="Página Index" />
        </Container> 
    </div>
   );
  }
}

You can do this in Act?

Answer 1

If I understood correctly, within your "Index" component you imported other components, such as "Mainstyle" and "Container". This "Container" component was the first one you reported in your post. Within "Container", you want to insert other components, in your example, you want to insert within it another component called "Title".

You would do this in your "Container" component using a props called "Children". Your component would look like this:

export default class Container extends React.Component {
render() {
    return (
        <div className="container-fluid">
          <div className="row">
            <div className = "col-12 mt-3">
                {this.props.children}
            </div>   
          </div>
        </div>  
    );
  }
}

Here is an example:

https://www.freecodecamp.org/forum/t/react-components-rendering-other-components/90336/4

And here is the documentation for components:

https://reactjs.org/docs/react-component.html