ReactJS How to toggle elements to hide or show - reactjs

Question

I am very new to React and the ES6 syntax I have a chat widget that i want to toggle to show and hide as i click the header,and I have already implemented an onClick handler, but in terms of the logic I am having trouble finding a similar implementation online. this is my code:
import React, {Component} from 'react';
import chat from './styles.css';
import {connect} from 'react-redux';
class ChatWidget extends Component {
handleClick(event) {
console.log("Hide or unhide chat body")
}
render() {
return (
<div className={chat.container}>
<div onClick={this.handleClick.bind(this)}
className={chat.header}>
<span className={chat.name}>Idol</span>
</div>
<div className={chat.body}>
This is the Body of the chat
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.activeUser
};
}
export default connect(mapStateToProps)(ChatWidget);

Answer 1

It could look like this:
class ChatWidget extends Component {
constructor(props) {
super(props);
this.state = {
showChat: true
};
 }
handleClick(event) {
this.setState({
showChat: !this.state.showChat
});
}
render() {
return (
<div className={chat.container}>
<div onClick={this.handleClick.bind(this)}
className={chat.header}>
<span className={chat.name}>Idol</span>
</div>
{this.state.showChat &&
(<div className={chat.body}>
This is the Body of the chat
</div>)
}
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.activeUser
};
}
export default connect(mapStateToProps)(ChatWidget);
But there are different approaches for conditional rendering.
See documentation here: https://facebook.github.io/react/docs/conditional-rendering.html

Answer 2

Use a state variable that will store the current state, whether to show the body or not. On the basis of that variable render the body of the Chart, that is called conditional rendering.
Check this:
class ChatWidget extends Component {
constructor(){
super();
this.state={isShowBody: true}
}
handleClick(event) {
this.setState({isShowBody: !this.state.isShowBody})
}
render() {
return (
<div className={chat.container}>
<div onClick={this.handleClick.bind(this)} className={chat.header}>
<span className={chat.name}>Idol</span>
</div>
{this.state.isShowBody ?
<div className={chat.body}>
This is the Body of the chat
</div>
: null}
</div>
);
}
}

Answer 3

What you can do is create a css class
.hidden {
display: none;
}
And dynamically toggle that class on your <div class={chat.body}.
So add an id to the div so it's easier to grab.
<div class={chat.body} id='chat-body'>
...
</div>
And inside your handleClick method
handleClick(event) {
let chat = document.getElementById("chat-body");
chat-body.classList.toggle('hidden')
}

Answer 4

Here you have an example, it has comments on the lines so you know what each line is doing.
Consider that adding a hidden class to the component will not unmount it, it will just hide it from the DOM
import React, {Component} from 'react';
import chat from './styles.css';
import {connect} from 'react-redux';
class ChatWidget extends Component {
// You need state to update the view
state = {
show: false
}
toggleBody() {
// You can pass true or false to this function to show or hide the body
this.setState({show: !this.state.show})
}
render() {
{/* Take the show property from the state */}
const {show} = this.state
return (
<div className={chat.container}>
<div onClick={this.toggleBody.bind(this)} className={chat.header}>
<span className={chat.name}>Idol</span>
</div>
{/* Add the class hidden to the body if show is false (you should create the hidden class in CSS) */}
<div className={`${chat.body} ${show ? '' : 'hidden'}`}>
This is the Body of the chat
</div>
</div>
);
}
}
function mapStateToProps(state) {
return {
user: state.activeUser
};
}
export default connect(mapStateToProps)(ChatWidget);