React Parent Child Components

by Daniel Pegues

HTML

<div id="root"></div>

React

class Main extends React.Component{
		
		constructor(props){
			super(props);
			
			//this.titleHandler = this.titleHandler.bind(this);
			//this.sidebarHandler = this.sidebarHandler.bind(this);
			
			this.state = {
				pageTitle: '',
				mounted: false,
				data: [],
				sidebar: false
			}
		}
		
		// Title Handler
		titleHandler = () => {
			console.log('Page Title Function Called');
			this.setState({ pageTitle: this.state.pageTitle });
		}
		
		// Sidebar Handler
		sidebarHandler = () => {
			console.log('Sidebar Function Called');
			this.setState({ sidebar: !this.state.sidebar });
		}
		
		// Load Dashboard
		loadDashboard = () =>{
			ReactDOM.render(<Dashboard/>, document.querySelector('#main-content'));
		}
		
		// Load New Page
		loadNewPage = () => {
			ReactDOM.render(<NewPage action={this.sidebarHandler} />, document.querySelector('#main-content'));
		}
		
		// Render
		render(){
			return(
				<div id="wrapper" className="wrapper">
					
					<button onClick={this.loadDashboard}>Load Dashboard</button>
					<button onClick={this.loadNewPage}>Load New Page</button>
					
					{/* Content: Start */}
					<div id="content" className="content">
						
						{/* Main: Start */}
						<div id="main" className="main">
							
							<div className="section-title">
								<h2>{this.state.pageTitle}</h2>
							</div>
							
							{/* Main Content Container: Start */}
							<div id="main-content" className="main-content container-fluid"></div>
							{/* Main Content Container: End */}
							
						</div>
						{/* Main: End */}
						
						{this.state.sidebar ? <Sidebar/> : null}
						
					</div>
					{/* Content: End */}
					
				</div>
			);
		};
	}

	ReactDOM.render(<Main />,document.querySelector('#root'));

	class Dashboard extends React.Component{
		
		constructor(props){
			super(props);
			
			this.state = {
				pageTitle: 'Dashboard'
			};
			
			this.props.sidebarHandler;
		}
		
		//...