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

Mayank Shukla · Accepted Answer · 2017-06-29 07:22:27Z

5

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>
);

edited Jun 29, 2017 at 7:22

answered Jun 29, 2017 at 7:15

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

2 Comments

Fuego Over a year ago

Thank for you quick reply. With these modifications, only the second method works. I really want to know why it works in one case and not for the second. Do you have any strategy for both method? Does both methods return the same output? I don't think so because only one way is correct. That is why i don't understand alone.

Fuego Over a year ago

Actually, you show me the correct way because thanks to your response, i succeeded with both method. I answer to my question with the solution.

Fuego · Accepted Answer · 2017-06-29 07:39:36Z

With the help of @Mayank Shukla i found the best way to do.

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

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}

    </div>
);

export default Base2;

The function calling it is :

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

First Method:

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 = (props) =>{

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

};

export default MyComponent ;

Collectives™ on Stack Overflow

Reactjs Add dynamic component into other component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related