Reactjs Add dynamic component into other component

Question

I am trying to develop a webapp using reactjs and i have a issue. After more than 1 day of research, i don't understand how to do.

I want to use a component which are the main layout of my page adding other component to display in it.

In the component Base2, the child props contains another component.

import React from 'react';
import PropTypes from 'prop-types';
import { Link, NavLink } from 'react-router-dom';

const Base2 = (child) => (

    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <NavLink to="/">React App</NavLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
            </div>

        </div>

        <child/> // HERE the dynamic component

    </div>
);

export default Base2;

The function calling it is :

const TestBase = ({props}) => {
    return (<Base child={MyComponent}/>)
};

Moreover MyComponent can be a class declare following 2 methods:

import React from 'react';
import LoginForm from '../components/LoginForm.jsx';

class MyComponent extends React.Component{
    constructor(props) {
        super(props);
    ...
    }
    render() {
        return (
            <LoginForm
                onSubmit={this.processForm}
                onChange={this.changeUser}
                errors={this.state.errors}
                user={this.state.user}
            />
        );
    }

}

export default LoginPage;

Second method :

import React from 'react';
import { Card, CardTitle } from 'material-ui/Card';

const MyComponent = {
    render()  {
        return (<Card className="container">
            <CardTitle title="React Application" subtitle="Home         page." />
        </Card>);
    }
};

export default MyComponent ;

During my tests, only the second method works. The lack of "instance" (something like that i guess) from the second method might be the issue? How can I develop Base2 component to take these 2 types of component declaration?

Thanks in advance for your help

Answer 1

First pass the component like this:

<Base child={<MyComponent/>}/>

Then render it inside Base2 component by props.child, the way you wrote the Base2 component, child (just the argument name) will have the value of props not directly the component you are passing in props.

Write it like this:

const Base2 = (props) => ( 
    <div>
        <div className="top-bar">
            <div className="top-bar-left">
                <NavLink to="/">React App</NavLink>
            </div>

            <div className="top-bar-right">
                <Link to="/login">Log in</Link>
            </div>
        </div>

        {props.child}   //here

    </div>
);