CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
michasaucer
michasaucer

Reputation: 5236

How to make onClick event in NavBar in react?

I'm making my first react project. I'm new in JS, HTML, CSS and even web app programming.

What I'm trying to do is to display some information on button click.

I have my main default component, App.js. It looks like this:

import React, { Component } from "react";
import Navbar from "./Components/Navbar";
import "./Styles/App.css";
import ProjectsList from "./Components/Projects/ProjectsList";
import axios from "axios";

class App extends Component {
  state = {
    projects: [], //i get it from api on Didmount();
    showProjects: true //hardcoded var to shows projects list
  };

  componentDidMount() {
      //i get projects here from axios and my api, it works ok!
  }

  render() {
    return (
      <div>
        <Navbar />
        {this.state.showProjects && (
          <ProjectsList projects={this.state.projects} />
        )}
      </div>
    );
  }
}

export default App;

As you can see, I can manipulate my ProjectLists visibility by hard-coded showprojects boolean. It works ok. When false it is not visible and when true it is visible, pretty simple.

How to transfer that showProjects variable to my Navbar.js component and trigger it by clicking on Navbar item?

My Navbar.js:

import React, { Component } from "react";
import { Navbar } from "react-bootstrap";

class NavBar extends Component {
  render() {
    return (
      <Navbar inverse collapseOnSelect>
        <Navbar.Collapse>
          <Navbar.Form>
            <Navbar.Brand> Projects </Navbar.Brand> //button click here, how to?
          </Navbar.Form>         
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default NavBar;

And view look like this:

enter image description here

I want to have option to click on Projects on my Navbar, then my ShowProjects will be set to true and projects will be visible. How to do that?

Thanks for any advices!

EDIT:

If it will help, my ProjectsList.js component:

import React, { Component } from "react";
import Project from "./Project";
import { ListGroup } from "react-bootstrap";

class ProjectsList extends Component {
  render() {
    return (
      <ListGroup>
        {this.props.projects.map(project => {
          return <Project project={project} key={project.id} />;
        })}
      </ListGroup>
    );
  }
}

export default ProjectsList;

Upvotes: 0

Views: 8938

Answers (1)

Dmitriy
Dmitriy

Reputation: 1241

First create a state change function in the parent component: 

toggleShowProjects = () => {
    this.setState(prevState => ({
      showProjects: !prevState.showProjects
    }))
  }

Than pass the function to your Navbar component: 

import React, { Component } from "react";
import Navbar from "./Components/Navbar";
import "./Styles/App.css";
import ProjectsList from "./Components/Projects/ProjectsList";
import axios from "axios";

class App extends Component {
  state = {
    projects: [], //i get it from api on Didmount();
    showProjects: true //hardcoded var to shows projects list
  };

  componentDidMount() {
      //i get projects here from axios and my api, it works ok!
  }
toggleShowProjects = () => {
        this.setState(prevState => ({
          showProjects: !prevState.showProjects
        }))
      }

  render() {
    return (
      <div>
        <Navbar 
        toggleProjects={this.toggleShowProjects} />
        {this.state.showProjects && (
          <ProjectsList  
          projects={this.state.projects} />
        )}
      </div>
    );
  }
}

export default App;

Upvotes: 2

Related Questions