Develop Reference

toggling class dynamically in react?

I am working on a React application that has a header component with two buttons:
import React, { useRef } from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
return (
<header className='header'>
<h2 className='resume-title'>
Muhammad <br />
Sohaib Furqan
</h2>
<button className='btn'>
<Link to='/'>Home</Link>
</button>
<button className='btn'>
<Link to='/projects'>Projects</Link>
</button>
</header>
);
};
I want to make it so that the button that is clicked gets the 'active' class while the other buttons the 'active' class is removed. In vanillaJS, I would use 'querySelectorAll' to get all buttons and then map through the nodeList, toggling as appropriate. But not sure how I would do that in React. I'm inclined towards useRef but how can I set ref to point to the button that was clicked?
Hope I've managed to make myself clear.
TIA,
Sohaib

See NavLink.
You can use it like
<NavLink className="btn" to='/'>Home</Link>
NavLink will get .active class when path matches. So you can add styles to the active class.
You can also customize the className using
<NavLink to="/" activeClassName="some-custom-class">
Home
</NavLink>

<Link> no longer has the activeClassName or activeStyle properties. In react-router v4 you have to use <NavLink> if you want to do conditional styling:
import React, { useRef } from 'react';
import { NavLink } from 'react-router-dom';
const Header = () => {
return (
<header className='header'>
<h2 className='resume-title'>
Muhammad <br />
Sohaib Furqan
</h2>
<NavLink to='/' className="btn" activeClassName="active">Home</Link>
<NavLink to='/projects' className="btn" activeClassName="active">Projects</Link>
</header>
);
};
and in your style.css
.active { //do-whatever }

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
const Header = () => {
const [active,setActive] = useState("Home")
const handleActive = (activeTab) => {
setActive(activeTab)
}
return (
<header className='header'>
<h2 className='resume-title'>
Muhammad <br />
Sohaib Furqan
</h2>
<button className={active === "Home" ? 'btn active' : 'btn' } onClick={() => handleActive("Home")} >
<Link to='/'>Home</Link>
</button>
<button className={active === "Projects" ? 'btn active' : 'btn' } onClick={() => handleActive("Projects")} >
<Link to='/projects'>Projects</Link>
</button>
</header>
);
};

How to import parameters from one React component to another

Please apologize my lack of knowledge but I'm new to React and JavaScript.
I'm building a Website where I have a Sidebar and a Navbar on top of the page. The Sidebar is activated / deactivated via an hamburger menu which is located in the Navbar-component. It is activated via CSS-classes: <nav className={isActive ? 'nav-menu active' : 'nav-menu'}>
My Problem now is, that I dont know how to transfer the variables toggleButton and isActive from the Navbar.jsx where they are declared to the Sidebar.jsx where I need them to activate my Sidebar.
Do I need to import the js files? Is it possible to export isActive and toggleButton seperatly from the JSX-Code?
Thanks for your help! :)
This is my Code:
Navbar-component
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Nav from "react-bootstrap/Nav";
import FormControl from "react-bootstrap/Form";
import Dropdown from "react-bootstrap/Dropdown";
import './Navbar.css';
const NavbarTop = () => {
const [isActive, setIsActive] = useState(false)
const toggleButton = useCallback(
() => setIsActive(prevState => !prevState),
[],
);
return (
<>
<Navbar className="background-color" variant="light">
<Navbar.Brand href="#home">
<img
src="https://pbs.twimg.com/profile_images/603568605796634624/Nq0nXZZA_400x400.jpg"
width="30"
height="30"
className="d-inline-block align-top"
alt="React Bootstrap logo"
/>
</Navbar.Brand>
<Dropdown>
<Dropdown.Toggle Classname="color" rvariant="success" id="dropdown-basic">
Kategorien
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Bücher</Dropdown.Item>
<Dropdown.Item href="#/action-2">Veranstaltungen</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#/action-3">Etwas Posten</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-primary">Search</Button>
</Form>
<Link to='#' className='menu-bars'>
<HamburgerSpring className="Hamburger"
buttonColor="transparent"
barColor="#007466"
buttonWidth={35}
{...{ isActive, toggleButton }}
/>
</Link>
</Animate>
</Navbar>
</>
);
};
export default NavbarTop;
Sidebar-component:
import React, { useState, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { SidebarData } from './SidebarData';
import { IconContext } from 'react-icons';
import {Animate} from 'react-rebound';
import { HamburgerSpring } from 'react-animated-burgers';
import './Sidebar.css';
function Sidebar(isActive, toggleButton) {
return (
<>
<IconContext.Provider value={{ color: 'white' }}>
<nav className={isActive ? 'nav-menu active' : 'nav-menu'}>
<div className='nav-menu-items'>
<ul onClick={toggleButton}>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</div>
</nav>
</IconContext.Provider>
</>
);
}
export default Sidebar;

One possible approach is to move the state one level up.
const ParentComponent = () => {
const [isActive, setIsActive] = useState(false)
const toggleButton = useCallback(
() => setIsActive(prevState => !prevState),
[],
);
.....
.....
{/* You can use like this */}
<SideBar isActive={isActive} toggleButton={toggleButton} />
<NavBar isActive={isActive} toggleButton={toggleButton} />
}
Alternatively, you can use the context API to store to hold the state and access it anywhere within the app. In your case, I think the first option is a better idea given it's simple nature.

This is where you'd lift state up, outside of those into a container of sorts.
function Container() {
const [toggleIsActive, setToggleIsActive] = useState(false);
return (
<Navbar ... toggleIsActive={toggleIsActive} setToggleIsActive={setToggleIsActive} />
<Sidebar ... toggleIsActive={toggleIsActive} setToggleIsActive={setToggleIsActive} />
)
}
Essentially you track that from higher up in the tree while providing the values/methods for changing to the children components.

React way to open a NavBar onClick on a button

I trying to find a way to open the navbar of ReactJS app when i'm clicking on my "MENU" button.
At the beginning my nav component have a width of 0px (with overflow : hidden). When i'm clicking on the button my nav should have a width of 400px. I'm a beginner with React.
I have two React Components :
Topbar
export default function Topbar() {
return (
<div className="topbar__container">
<div className='topbar__menuButton'>
<Link className="topbar__link">MENU</Link>
</div>
<div className="topbar__title">
<Link to="/" className="topbar__link">EDGAR</Link>
</div>
</div>
)
}
Nav
const Nav = () => {
return (
<div className="navbar__container">
<Query query={CATEGORIES_QUERY} id={null}>
{({ data: { categories } }) => {
return (
<nav className="nav">
<ul>
{categories.map((category, i) => {
return (
<li key={category.id}>
<Link to={`/category/${category.id}`} className="nav__link">
{category.name}
</Link>
</li>
)
})}
</ul>
</nav>
)
}}
</Query>
</div>
)
}
export default Nav

To achieve something like that you have to set this logic in the common parent of both component (here App for the example).
App will manage a state to determine if the Nav is open or not. The state is called isMenuOpen and can be changed using the setIsMenuOpen() function. We will give to the children Nav the state isMenuOpen and to the children TopBar a callback from the function setIsMenuOpen():
App.jsx
import React from "react";
import TopBar from "./TopBar";
import Nav from "./Nav";
export default function App() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
return (
<div className="App">
<TopBar setMenuStatus={setIsMenuOpen} />
<Nav isOpen={isMenuOpen} />
</div>
);
}
Then the TopBar have to set the value of isMenuOpen to true using the function setIsMenuOpen() from the props.
TopBar.jsx
import React from "react";
export default function Topbar({ setMenuStatus }) {
return (
<div className="topbar__container">
<div className="topbar__menuButton">
<button
type="button"
onClick={() => {
setMenuStatus(true);
}}
>
Menu
</button>
</div>
</div>
);
}
Then the component Nav will set a specific class (here .open) if isOpen coming from props is true.
Nav.jsx
import React from "react";
import "./styles.css";
export default function Nav({ isOpen }) {
return (
<div id="nav" className={isOpen ? "open" : ""}>
Menu
</div>
);
}
styles.css
#nav {
display: none;
}
#nav.open {
height: 400px;
display: inline-block;
}
You can try this example in this codesandbox.

import React, {useState} from "react";
import "./styles.css";
export default function App() {
const [toggle, setToggle]= React.useState(false)
const [width, setWidth]= React.useState('')
const showMenu = () => {
setToggle(!toggle)
if(toggle === true) {
setWidth('50px')
}else {
setWidth('500px')
}
}
return (
<div className="App">
<button onClick={showMenu}>Menu</button>
<div style={{width, border:'1px solid red'}}>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</div>
</div>
);
}
reproducing link: https://codesandbox.io/s/billowing-flower-rxdk3?file=/src/App.js:0-592

Read data about specific element in a list

I have this list:
render() {
return (
<section className='display-question'>
<div className='wrapper'>
<ul style={{listStyleType: 'none'}}>
{/*kategoria, poziom (liceum itd), pkty, zdjecie*/}
{this.state.questions.map((question) => {
return (
<li key={question.id}>
<h3>Kategoria: {question.category}</h3>
<p>Poziom: {question.level}</p>
<p>Punkty: {question.pointAmount}</p>
<img alt='' style={{width: '20%'}} src={question.photoURL}/>
<Button onClick={this.clickHandler} style={{display: 'block', margin: 'auto'}}
bsStyle="primary" id={question.id}>Rozwiaz to zadanie kurwo
</Button>
</li>
)
})}
</ul>
</div>
</section>
)
}
I want, every time someone clicks on the button, it will take them to a different screen, showing more details. But I have no idea how to start. So far this is my App.js
import React, {Component} from 'react';
// import logo from './logo.svg';
import './App.css';
import Navbar from "./components/nav";
import Questions from './components/questions';
import {Stuff} from './components/stuff';
class App extends Component {
constructor(p) {
super(p);
this.state = {user: null};
this.checkUserState = this.checkUserState.bind(this);
}
checkUserState(user) {
this.setState({user});
}
render() {
return (
<div className="App">
<Navbar {...this}/>
{this.state.user ? <Questions/> : <Stuff/>}
</div>
);
}
}
export default App;
And this is the Questions.js file:
import React from 'react';
import firebase from 'firebase';
import {Button} from 'react-bootstrap';
class Questions extends React.Component {
constructor(props) {
super(props);
this.state = {
currentItem: '',
username: '',
questions: []
}
this.clickHandler = this.clickHandler.bind(this);
}
componentDidMount() {
const questionsRef = firebase.database().ref('Works');
questionsRef.on('value', (snapshot) => {
let questions = snapshot.val();
let newState = [];
for (let question in questions) {
newState.push({
id: question,
category: questions[question].category,
level: questions[question].level,
pointAmount: questions[question].pointAmount,
photoURL: questions[question].photoURL,
});
}
this.setState({
questions: newState
});
});
}
clickHandler() {
console.log("e");
}
render() {
return (
<section className='display-question'>
<div className='wrapper'>
<ul style={{listStyleType: 'none'}}>
{/*kategoria, poziom (liceum itd), pkty, zdjecie*/}
{this.state.questions.map((question) => {
return (
<li key={question.id}>
<h3>Kategoria: {question.category}</h3>
<p>Poziom: {question.level}</p>
<p>Punkty: {question.pointAmount}</p>
<img alt='' style={{width: '20%'}} src={question.photoURL}/>
<Button onClick={this.clickHandler} style={{display: 'block', margin: 'auto'}}
bsStyle="primary" id={question.id}>Rozwiaz to zadanie kurwo
</Button>
</li>
)
})}
</ul>
</div>
</section>
)
}
}
export default Questions;
And this is what I have for the question.js file.
import React from 'react';
export default class Question extends React.Component {
constructor(p) {
super(p);
}
render() {
return (
<React.Fragment>
<img src="" alt=""/>
</React.Fragment>
)
}
}
So how this works: I grab the list from Firebase, then I render a list with h3, some ps, img, and a button.
I want when the button is clicked, for the user to be taken to a different "screen" with more details. But I cannot see how to set it up.
Any help will be appreciated. I'm open to another suggestions. I was thinking about making it a modal, but this doesn't seem right.

The missing piece is that you don't use any routing library.
The most popular one is react-router.
Here's a basic example (from their docs), that will help you to understand the idea and help you start using it:
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>
Rendering with React
</Link>
</li>
<li>
<Link to={`${match.url}/components`}>
Components
</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
Props v. State
</Link>
</li>
</ul>
<Route path={`${match.path}/:topicId`} component={Topic}/>
<Route exact path={match.path} render={() => (
<h3>Please select a topic.</h3>
)}/>
</div>
)
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
export default BasicExample

Toggle classes (navbar burger menu [show, hide]) | works in 'develop' but not in 'build'

In the Navbar.js component I want to be able to set state to true or false of the is-active css class, so that when the user presses the burger menu button, the menu shows or hides.
The code below works in the gatsby develop but not in the gatsby build.
There are no errors in 'build'.
Question: Why the code below does not work in gatsby build?
import React from 'react';
import Link from 'gatsby-link';
import logo from '../img/logo.svg';
class Navbar extends React.Component {
state = { showMenu: false }
toggleMenu = () => {
this.setState({
showMenu: !this.state.showMenu
})
}
render() {
const menuActive = this.state.showMenu ? 'is-active' : '';
const burgerActive = this.state.showMenu ? 'is-active' : '';
return (
<nav className="navbar">
<div className="navbar-brand">
<Link className="navbar-item" to="/">
<img src={logo} style={{ width: '88px' }} itemprop="image" alt="" />
</Link>
<div className={`navbar-burger burger ${burgerActive}`} onClick={this.toggleMenu}>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div className={`navbar-menu ${menuActive}`} >
<div className="navbar-start">
<Link className="navbar-link" to="/" onClick={this.toggleMenu}>
Home
</Link>
<Link className="navbar-link" to="/services" onClick={this.toggleMenu}>
Services
</Link>
<Link className="navbar-link" to="/contact" onClick={this.toggleMenu}>
Contact
</Link>
</div>
</div>
</nav>)
}
};
export default Navbar;