Pass component to the child

Question

There is a way for me to pass a specialized component to a child by props?

I have a situation where I want to reuse as much as possible, without having to duplicate it, and I don’t really understand the best way to do that. Basically I have a card(widget) and inside that card I have a body and there I want to load different things inside it.

The idea is when to use the <base /> i have a props "type" where I pass the widget type, so it loads the icon for what it needs and in body loads the jsx for the type passed. I hope I’ve made myself clear, anything at all, let me know so I can try to explain better.

For example, I have a.jsx widget component (which consists of a widgetTitle.jsx, widgetBody.jsx, and widgetFooter.jsx)

jsx widget.

<div>
    <widgetTitle />
    <widgetBody />
    <widgetFooter /> 
</div>

widgetTitle.jsx

<div>
    <i>icone</>
    <h2>{this.props.titulo}</h2>
</div>

widgetBody.jsx

<div>
  {this.props.body}
</div>

widgetFooter.jsx

<div>
   <footer>Qualquer coisa do footer</footer>
</div>

I have a specialized.jsx component too

<div>
    <i>icone</>
    <span>Status</span>
    <i>icone</>
    <span>Status</span>
    <button>On</button>
</div>

Then I can use the component that way?

<base titulo="Meu Titulo" texto="Meu texto" body={Aqui carregar o especializado}/>

Answer 1

You can use it props.children to pick up the child elements:

const Base = React.createClass({
    render: function() {
        return <div>
                  <h1>{this.props.titulo}</h1>
                  <p>{this.props.texto}</p>
                  <div>{this.props.children}</div>
               </div>;
    }
});

const Especializado = React.createClass({
    render: function() {
        return <div>
                  <h2>{this.props.subTitulo}</h2>
                  <div>Qualquer coisa que vai ficar dentro do body do base</div>
                  <button>Entrar</button>
               </div>;
    }
});

ReactDOM.render(<Base titulo="teste" texto="teste"><Especializado subTitulo="teste" /></Base>, 
                document.getElementById('app'));