We Keep Coding

React Toggle Body Class with button

I'm still learning React but I'm having an issue toggling a body class with a button in the menu.
const toggleSideMenu = event => {
// toggle class on click
//Below is not correct
event.getElementsByTagName('body').classList.toggle('sb-sidenav-toggled');
};`
<button onClick={toggleSideMenu} id="sidebarToggle" href="#!"><i className="fas fa-bars"></i></button>
I'm used to doing this easily in jQuery but it's not recommended to use jQuery in React because of the dom. I would appreciate any suggestions.
Thanks so much!

In this example, we are using the useState hook to keep track of the toggle state. The initial state is set to false. We are using the isToggled state in the JSX to determine what to render on the screen, and to update the text of the button.
We have an onClick event on the button, which calls the setIsToggled function and pass the negation of the current state (!isToggled), this is the way to toggle the state, every time the button is clicked.
import React, { useState } from 'react';
const MyComponent = () => {
// useState hook to keep track of the toggle state
const [isToggled, setIsToggled] = useState(false);
return (
<div>
{/* render some content or change className based on the toggle state */}
<p className={isToggled? "class1" : "classB">Toggled on</p>
<button onClick={() => setIsToggled(!isToggled)}>
{isToggled ? 'Turn off' : 'Turn on'}
</button>
</div>
);
}
export default MyComponent;
But if you need to do something more advanced, maybe you can learn more about React Context.
import React, { useState } from 'react';
// Create a context to share the toggle state
const ToggleContext = React.createContext();
const MyApp = () => {
// useState hook to keep track of the toggle state
const [isToggled, setIsToggled] = useState(false);
return (
<ToggleContext.Provider value={{ isToggled, setIsToggled }}>
<MyComponent1 />
<MyComponent2 />
{/* any other components that need access to the toggle state */}
</ToggleContext.Provider>
);
}
const MyComponent1 = () => {
// use the toggle state and toggle function from the context
const { isToggled, setIsToggled } = useContext(ToggleContext);
return (
<div>
<p className={isToggled? "class1" : "classB">Toggled on</p>
<button onClick={() => setIsToggled(!isToggled)}>
{isToggled ? 'Turn off' : 'Turn on'}
</button>
</div>
);
}
const MyComponent2 = () => {
// use the toggle state from the context
const { isToggled } = useContext(ToggleContext);
return (
<div>
{isToggled ? <p>Toggled on</p> : <p>Toggled off</p>}
</div>
);
}
export default MyApp;

A very basic example to show you how to use state to maintain whether a menu should be open or not.
It has one button that when clicked calls a function that updates the state.
It has one Menu component that accepts that state, and uses CSS to determine whether it should be "open" (ie on/off screen).
Like I said, as simple as I could make it.
const { useState } = React;
function Example() {
// The state set to either true or false
// Initially it's false / menu closed
const [ menuOpen, setMenuOpen ] = useState(false);
// When the button is clicked we take the
// previous state and toggle it - either from true
// to false, or vice versa
function handleClick() {
setMenuOpen(prev => !prev);
}
// One Menu component that accepts that state
// and one button that updates the state
return (
<div>
<Menu open={menuOpen} />
<button onClick={handleClick}>
Toggle Sidebar Menu
</button>
</div>
);
}
// Small menu (an aside element) which uses CSS
// to work out its position on the screen
// It does this by creating a classList using the default
// "menu" which it ties together with "open" but it only
// adds that if the state is true
// And then just use that joined array as the className on
// the element
// You can see in the CSS what both those classes do
function Menu({ open }) {
const menuStyle = [
'menu',
open && 'open'
].join(' ');
return (
<aside className={menuStyle}>
I am a sidebar
</aside>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);
.menu { width: 100px; top: 0px; left: -120px; background-color: salmon; position: fixed; height: 100vh; padding: 10px; transition-property: left; transition-duration: 0.25s;}
.open { left: 0px; }
button { position: fixed; left: 150px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

getElementsByTagName() is method of Document or Element, not react event.
What you need to do, is to look for body inside document.
Also getElementsByTagName(), returns HTMLCollection (many elements), so you need to grab first one (usually there is only one body element on page)
document.getElementsByTagName('body')[0].classList.toggle('sb-sidenav-toggled');
There is also shortcut for body element document.body, so it can be also written as:
document.body.classList.toggle('sb-sidenav-toggled');

Clicking a left arrow or a right arrow to switch an element in an array with the element on the left or right React

I am new to React and am trying to build an app in which a user can create a card, delete a card, and change the order of the cards array by clicking left or right arrow to switch elements with the element on the left or on the right.
I am struggling to code this functionaliy. I have the function written to switch the card with that on the left, but this function is not doing anything right now. I also do not get any errors in the console from this function, so I really cannot determine where I am going wrong here.
Here is the code so far:
CardList.js will display the form to add a card and display the array of CardItems, passing the functions to switch these items to the left or right ('moveLeft', 'moveRight') as props.
import React from "react";
import CardItem from "./CardItem";
import CardForm from "./CardForm";
import './Card.css';
class CardList extends React.Component {
state = {
cards: JSON.parse(localStorage.getItem(`cards`)) || []
// when the component mounts, read from localStorage and set/initialize the state
};
componentDidUpdate(prevProps, prevState) { // persist state changes to longer term storage when it's updated
localStorage.setItem(
`cards`,
JSON.stringify(this.state.cards)
);
}
render() {
const cards = this.getCards();
const cardNodes = (
<div style={{ display: 'flex' }}>{cards}</div>
);
return (
<div>
<CardForm addCard={this.addCard.bind(this)} />
<div className="container">
<div className="card-collection">
{cardNodes}
</div>
</div>
</div>
);
}
addCard(name) {
const card = {
name
};
this.setState({
cards: this.state.cards.concat([card])
}); // new array references help React stay fast, so concat works better than push here.
}
removeCard(index) {
this.state.cards.splice(index, 1)
this.setState({
cards: this.state.cards.filter(i => i !== index)
})
}
moveLeft(index,card) {
if (index > 1) {
this.state.cards.splice(index, 1);
this.state.cards.splice((index !== 0) ? index - 1 : this.state.cards.length, 0, card)
}
return this.state.cards
}
moveRight(index, card) {
// ?
}
getCards() {
return this.state.cards.map((card) => {
return (
<CardItem
card={card}
index={card.index}
name={card.name}
removeCard={this.removeCard.bind(this)}
moveLeft={this.moveLeft.bind(this)}
moveRight={this.moveRight.bind(this)}
/>
);
});
}
}
export default CardList;
CardItem is taking in those props and ideally handling moving the card left or right in the array once the left or right icon is clicked.
import React from 'react';
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
class CardItem extends React.Component {
render() {
return (
<div>
<Card style={{ width: '15rem'}}>
<Card.Header as="h5">{this.props.name}</Card.Header>
<Card.Body>
<Button variant="primary" onClick={this.handleClick.bind(this)}>Remove</Button>
</Card.Body>
<Card.Footer style={{ display: 'flex' }}>
<i class="arrow left icon" onClick={this.leftClick.bind(this)} style={{ color: 'blue'}}></i>
<i class="arrow right icon" onClick={this.rightClick.bind(this)} style={{ color: 'blue'}}></i>
</Card.Footer>
</Card>
</div>
)
}
handleClick(index) {
this.props.removeCard(index)
}
leftClick(index, card) {
this.props.moveLeft(index, card)
}
rightClick(index, card) {
this.props.moveRight(index, card)
}
}
export default CardItem;
Not sure where I am going wrong here. Any help would be appreciated
Edit #1
Hey guys, so I wrote out a different function to handle moving the card to the left, and I decided to bind "this" to that method in the constructor because I was getting errors saying the program could not read it. However, I am still getting errors basically saying that everything is not defined when I pass the function from CardList to CardItem as props. Does anybody know what the problem is? I suspect its my syntax when I call the methods in CardItem.
CardList.js
import React from "react";
import CardItem from "./CardItem";
import CardForm from "./CardForm";
import './Card.css';
class CardList extends React.Component {
constructor(props) {
super();
this.moveLeft = this.moveLeft.bind(this);
this.moveRight = this.moveRight.bind(this);
this.state = {
cards: JSON.parse(localStorage.getItem(`cards`)) || []
// when the component mounts, read from localStorage and set/initialize the state
};
}
componentDidUpdate(prevProps, prevState) { // persist state changes to longer term storage when it's updated
localStorage.setItem(
`cards`,
JSON.stringify(this.state.cards)
);
}
render() {
const cards = this.getCards();
const cardNodes = (
<div style={{ display: 'flex' }}>{cards}</div>
);
return (
<div>
<CardForm addCard={this.addCard.bind(this)} />
<div className="container">
<div className="card-collection">
{cardNodes}
</div>
</div>
</div>
);
}
addCard(name) {
const card = {
name
};
this.setState({
cards: this.state.cards.concat([card])
}); // new array references help React stay fast, so concat works better than push here.
}
removeCard(index) {
this.state.cards.splice(index, 1)
this.setState({
cards: this.state.cards.filter(i => i !== index)
})
}
moveLeft(index, card) {
this.setState((prevState, prevProps) => {
return {cards: prevState.cards.map(( c, i)=> {
// also handle case when index == 0
if (i === index) {
return prevState.cards[index - 1];
} else if (i === index - 1) {
return prevState.cards[index];
}
})};
});
}
moveRight(index, card) {
// ?
}
getCards() {
return this.state.cards.map((card) => {
return (
<CardItem
card={card}
index={card.index}
name={card.name}
removeCard={this.removeCard.bind(this)}
moveLeft={this.moveLeft}
moveRight={this.moveRight}
/>
);
});
}
}
export default CardList;
CardItem.js
import React from 'react';
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
class CardItem extends React.Component {
render() {
return (
<div>
<Card style={{ width: '15rem'}}>
<Card.Header as="h5">{this.props.name}</Card.Header>
<Card.Body>
<Button variant="primary" onClick={this.handleClick.bind(this)}>Remove</Button>
</Card.Body>
<Card.Footer style={{ display: 'flex' }}>
<i class="arrow left icon" onClick={leftClick(index, card)} style={{ color: 'blue'}}></i>
<i class="arrow right icon" onClick={rightClick(index, card)} style={{ color: 'blue'}}></i>
</Card.Footer>
</Card>
</div>
)
}
handleClick(index) {
this.props.removeCard(index)
}
leftClick(index, card) {
this.props.moveLeft(index,card)
}
rightClick(index, card) {
this.props.moveRight(index, card)
}
}
export default CardItem;

To update state arrays in React, you shouldn't use splice, push or the [] operator.
Instead use the methods that return a new array object viz. map, filter, concat,slice.
For a detailed explanation, see this article.
So you can do something like :
moveLeft(index,card) {
this.setState((prevState, prevProps)=> {
return {cards: prevState.cards.map((c,i)=> {
// also handle case when index == 0
if(i == index) {
return prevState.cards[index-1];
} else if(i == index-1) {
return prevState.cards[index];
}
})};
});
}
When updating React state using the previous value, always use
setState((prevState,prevProps)=>{ return ...})
as such state updates may be asynchronous. See React docs.
Since you are calling the parent component method from child, it's better to bind these methods in the CardList constructor. Eg:
this.moveLeft = this.moveLeft.bind(this);
this.moveRight ....

How do you remove a class from elements inside a component in React.JS when clicking outside given component?

I am trying to emulate a behavior similar to clicking on the overlay when a Modal popup is open. When clicking outside the sidenav component, I want to close all elements that are currently in a flyout mode.
I have a multi-tier nested navigation menu that is stored in its own component, Sidebar. I have the following piece of code that handles clicks that occur outside the Sidebar component:
class Sidebar extends React.Component {
...
handleClick = (e) => {
if (this.node.contains(e.target)) {
return;
}
console.log('outside');
};
componentDidMount() {
window.addEventListener('mousedown', this.handleClick, false);
}
componentWillUnmount() {
window.removeEventListener('mousedown', this.handleClick, false);
}
render() {
return (
<div
ref={node => this.node = node}
className="sidebar"
data-color={this.props.bgColor}
data-active-color={this.props.activeColor}
>
{renderSideBar()}
</div>
);
}
...
}
This part works fine - but when the flyout menus get displayed on clicking a parent menu option, I would like it to close -any- flyout menus that are currently opened.
-|
|
- Menu Item 1
|
|-option 1 (currently open)
|-option 2
- Menu Item 2
|
|-option 1 (closed)
|-option 2 (closed, clicked to expand - this is when it should close [Menu Item 1/Option 1]
The menu items are generated using <li> tags when mapping the data object containing the menu structure.
Is there a way to basically select all registered objects that have the class of 'collapse' / aria-expanded="true" and remove it? Similar to how jQuery would select dom elements and manipulate them.
I know that this is not the premise in which React works, it is just an example of the behavior I want to emulate.

As far as I understand you want to modify the DOM subtree from another component. To achive your goal you can use ref.
Using ref is helpful when you want to access HtmlElement API directly - in my example I use animate(). Please, read the documentation as it describes more of ref use cases.
Below is the simple example of animating <Sidebar/> shrinking when user clicks on <Content />.
const { useRef } = React;
function Main() {
const sidebar = useRef(null);
const handleClick = () => {
sidebar.current.hide();
};
return (
<div className="main">
<Sidebar ref={sidebar} />
<Content onClick={handleClick} />
</div>
);
}
class Sidebar extends React.Component {
constructor(props) {
super(props);
this.state = { visible: true };
this.show = this.show.bind(this);
this.sidebar = React.createRef(null);
}
show() {
if (!this.state.visible) {
this.sidebar.current.animate(
{ flex: [1, 2], "background-color": ["teal", "red"] },
300
);
this.setState({ visible: true });
}
}
hide() {
if (this.state.visible) {
this.sidebar.current.animate(
{ flex: [2, 1], "background-color": ["red", "teal"] },
300
);
this.setState({ visible: false });
}
}
render() {
return (
<div
ref={this.sidebar}
className={this.state.visible ? "sidebar--visible" : "sidebar"}
onClick={this.show}
>
Sidebar
</div>
);
}
}
function Content({ onClick }) {
return (
<div className="content" onClick={onClick}>
Content
</div>
);
}
ReactDOM.render(<Main />, document.getElementById("root"));
.main {
display: flex;
height: 100vh;
}
.sidebar {
flex: 1;
background-color: teal;
}
.sidebar--visible {
flex: 2;
background-color: red;
}
.content {
flex: 7;
background-color: beige;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Creating re-orderable card component in React

I'm currently working my way through React, and I'm building a portfolio site. On the work page, I have 3 tiles, which will eventually be overlapping. When a card is clicked, it opens a side panel, and (hopefully) the active card goes to the front, pushing the others behind it to fill in the space.
I currently have the cards, or tabs working, I just need help with how to rearrange them on click.
This is the Tab.js component
import PropTypes from 'prop-types';
class Tab extends Component {
onClick = () => {
const { label, onClick } = this.props;
console.log('that tickles', {onClick})
onClick(label);
}
render() {
const {
onClick,
props: {
activeTab,
label,
position,
inactivePosition,
style
},
} = this;
console.log(this)
let className = 'tab-list-item';
if (activeTab === label) {
className += ' tab-list-active';
}
return (
<div
style={style}
className={className}
onClick={onClick}
>
{label}
</div>
);
}
}
export default Tab;
The tabs.js component that brings things together
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './tabstyle.css'
import Tab from './tab.js';
class Tabs extends Component {
static propTypes = {
children: PropTypes.instanceOf(Array).isRequired,
}
constructor(props) {
super(props);
this.state = {
activeTab: this.props.children[0].props.label,
};
}
onClickTabItem = (tab) => {
this.setState({
activeTab: tab
});
}
render() {
const {
onClickTabItem,
props: {
children,
position,
},
state: {
activeTab,
inactiveTab1,
inactiveTab2,
}
} = this;
return (
<React.Fragment>
{children.map((child) => {
const { label } = child.props;
return (
<Tab
activeTab={activeTab}
key={label}
label={label}
onClick={onClickTabItem}
/>
);
})}
<div className="tab-content">
{children.map((child) => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</React.Fragment>
);
}
}
export default Tabs;
the actual work page
export default function Work() {
return (
<React.Fragment >
<Tabs>
<div label="Example1" position='1'>
what in the world
</div>
<div label="Example2" position='2'>
lorem ipsum
</div>
<div label="Example3" position='3'>
Nothing to see here, this tab is!
</div>
</Tabs>
</React.Fragment>
);
}
}
.tab-list-item {
background-color:#fff;
position: relative;
transition: all .5s;
}
.tab-content {
color: #fff;
background-color: rgb(19, 47, 74);
grid-area:1/13/span 9/ span 8;
z-index: 5;
padding:3em;
}
.tab-list-active {
background-color: #f0f;
grid-area: 2/3/span 4/ span 4;
}
.position2{
grid-area:3/4/span 4/ span 4;
}
.position3{
grid-area:4/5/span 4/ span 4;
}
In my mind, I pictured building an array, and simply having the first card be active, then when another card is clicked, that card is sent to position 0, and so on.
I hope that's everything. As I said, I'm pretty new to React, bit less new to vanilla JavaScript, but still pretty green. Any guidance would be massively appreciated, as I'm at a bit of an impasse at the moment.
For a working demo, I'm using AWS Amplify to host it temporarily https://master.d2wqg4b36m462q.amplifyapp.com/work

React animate with CSSTransitionGroup on toggle

I am trying to get a transition between components entering and leaving when the button is clicked to toggle between state
I have also tried putting <UserDetails /> and <UserEdit /> as seperate components but have the same result in that no animation is triggered.
https://www.webpackbin.com/bins/-KjIPcMeQF3iriHRqTBW
Hello.js
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
import './styles.css'
export default class Hello extends React.Component {
constructor() {
super()
this.state = { showEdit: false }
this.handleEdit = this.handleEdit.bind(this)
}
handleEdit() { this.setState({ showEdit: !this.state.showEdit }) }
render() {
const UserDetails = () => (
<div className="componenta" key="1">UserDetails</div>
)
const UserEdit = () => (
<div className="componentb" key="2">UserEdit</div>
)
return(
<div >
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={10}
transitionLeaveTimeout={600}>
{this.state.showEdit ? <UserDetails /> : <UserEdit />}
</CSSTransitionGroup>
<button onClick={this.handleEdit}>Toggle</button>
</div>
)
}
}
styles.css
.thing-enter {
opacity: 0.01;
transition: opacity 1s ease-in;
}
.thing-enter.thing-enter-active {
opacity: 1;
}
.thing-leave {
opacity: 1;
transition: opacity 1s ease-in;
}
.thing-leave.thing-leave-active {
opacity: 0.01;
}

You have your key attribute set to the wrong item - the <div> is not the direct descendant of CSSTransitionGroup (because your wrapped it into a component by defining it as a function), so it doesn't know which items were added or removed. You have to set your keys to UserDetails and UserEdit, so CSSTransitionGroup can properly determine changes in it's children.
Here is your render method that works:
render() {
const UserDetails = () => (
<div className="componenta">UserDetails</div>
)
const UserEdit = () => (
<div className="componentb">UserEdit</div>
)
return(
<div >
<CSSTransitionGroup
transitionName="example"
transitionEnterTimeout={10}
transitionLeaveTimeout={600}>
{this.state.showEdit ? <UserDetails key="1" /> : <UserEdit key="2" />}
</CSSTransitionGroup>
<button onClick={this.handleEdit}>Toggle</button>
</div>
)
}
An alternative would be to store UserDetails and UserEdit into variables and then render them as such. That will allow you to leave the key attributes where they are now, instead of moving them.

Here is a working example using display:none to hide the unmounting component
enter link description here