React component switch
I have this simple code below. When I click the Toggle button, the Child component should be hiding / showing, but it is not.
Do I need to repeat something? I don't want to enable / disable the CSS class, just toggle with a button
import React, {Component} from 'react';
let active = true
const handleClick = () => {
active = !active
}
class Parent extends React.Component {
render() {
return (
<div>
<OtherComponent />
{active && <Child />}
<button type="button" onClick={handleClick}>
Toggle
</button>
</div>
)
}
}
class Child extends React.Component {
render() {
return (
<div>
I am the child
</div>
)
}
}
class OtherComponent extends React.Component {
render() {
return (
<div>
I am the OtherComponent
</div>
)
}
}
source to share
You need to install or install it via state:
class Parent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
active: true,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
active: !this.state.active
});
}
render() {
return (
<div>
<OtherComponent />
{this.state.active && <Child />}
<button type="button" onClick={this.handleClick}>
Toggle
</button>
</div>
)
}
}
Note that with this approach, you will be re-rendering the entire parent component (as well as its children).
Consider using a different approach where you are passing to a prop
child component and it will render with content based on that prop (it might render empty div
or whatever).
There are many libraries that make this job easier, like react-collapse with animation, etc.
source to share
You can use state
it props
to manage the state of your application as well.
So try:
class Parent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
active: true
};
this.handleClick = this.handleClick.bind(this);
}
const handleClick = () => {
this.setState({active = !this.state.active});
}
render() {
return (
<div>
<OtherComponent />
{this.state.active && <Child />}
<button type="button" onClick={handleClick}>
Toggle
</button>
</div>
);
}
}
Typically you can use forceUpdate()
to force re-render, but this is heavily discouraged:
const handleClick = () => {
active = !active;
this.forceUpdate();
}
source to share