To render a component with another component in Reactjs, let us take an example:

Let us suppose there are 2 components as follows:

Example

                                        

Component 1

class Header extends React.Component{

    constructor(){
        super();
    }

    checkClick(e, notyId){
       alert(notyId);
    }
}

export default Header;

Component 2

class PopupOver extends React.Component{

    constructor(){
        super();        
    }

    render(){
        return (
            <div className="displayinline col-md-12 ">
                Hello
            </div>
        );
    }
}

export default PopupOver;


Now to call the Component 1 in Component 2, use this code:

import React from 'react';

class Header extends React.Component {

constructor() {
    super();
}

checkClick(e, notyId) {
    alert(notyId);
}

render() {
    return (
        <PopupOver func ={this.checkClick } />
    )
}
};

class PopupOver extends React.Component {

constructor(props) {
    super(props);
    this.props.func(this, 1234);
}

render() {
    return (
        <div className="displayinline col-md-12 ">
            Hello
        </div>
    );
}
}

export default Header;

Suggest An Answer

Our Particitants

Use callback functions or use react router to switch components