Rendering components

Hi all!

so i was trying to make my website a react app, and failed miserably when it came to rendering the body of the page.

[https://stackoverflow.com/questions/63430240/trying-to-toggle-render-between-components-in-react](my same question on stackoverflow)

I want to toggle between components for the “body” of my app.
trying to make an app of my website.

i have tried many ways (except react-router, or Gatsby) and failed miserably. I am at a point where do not get error message, but nothing other than my state renders.

I want to toggle the “body” from the header button, having the router.js handle/render the different components.

app.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Header from './Components/header.js';
import Router from './Components/router.js';
import Footer from './Components/footer.js';


class App extends React.Component {
  render() {
  return (
    <div className="App">
     <Header />
     <Router />
     <Footer />
    </div>
    );
  }
}

export default App;

router.js

import React from 'react';
import Header, { onClick } from './header.js';
import Main from './main.js';
import About from './about.js';

class Router extends React.Component { 
    constructor(props) {
    super(props);

    this.state = { page: <Main /> };
    
    this.changePage = this.changePage.bind(this);
  }
  changePage(newPage) {
    this.setState({
      page: newPage
    });
  }
    render() {
      return (
        <section className="Router">
          <div>{this.state.page} <a onClick={this.changePage}></a></div>
        </section>
      );
    }
}

export default Router;

header.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';

class Header extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const page = e.target.value;
    return ({ page: (e) });
  }
  render() { 
    return(
      <div className="Header">
        <nav className="navbar navbar-expand-lg navbar-light" style={{backgroundColor: '#504C5E', color: '#A89B34'}}>
          
          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon color-black"></span>
          </button>
          <div className="col-12 collapse navbar-collapse my-2" id="navbarSupportedContent">
            <ul className="navbar-nav col-10">
              <li className="nav-item active col-2">
                <button onClick={this.handleChange} value="main">Home<span className="sr-only">(current)</span></button>
              </li>
              <li className="nav-item col-2">
                <button onClick={this.handleChange} value="<About />">About Me</button>
              </li>
              <li className="nav-item col-2">
                <button>Education</button>
              </li>
              <li className="nav-item col-2">
                <button>Experience</button>
              </li>
              <li className="nav-item col-2">
                <button>Projects</button>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

export default Header;

Hi there.

If you haven’t already, I would recommend that you look at the Learn React.js: Part II course here on Codecademy.

It covers the basic programming patterns for having components interact with their parents / siblings, in the way that you’re attempting to do. :slight_smile:

1 Like