React : Pass conditional renderings data

Question

Assuming that this is a Toggle component to hide and display data, when called alone it's working perfectly.

Now I have a dashboard.js where I will be calling this component, but I only want to output the data, keeping the toggle switch separated in his file.

How do I pass data from the Toggle component to the Dashboard component ? Still newbie in React and from what I learned apparently you can't pass data from child to parent.

import React, { Component } from 'react';

export default class Toggle extends React.Component{
    constructor(){
        super();
        this.state={isShowBody: false} 
    }

    handleClick(event) {
        this.setState({isShowBody: !this.state.isShowBody})
    }

    render() {
        return (
            <div   >
                <div  >
                <span className="switch switch-sm" >
                              <label>                                    
                                <input type="checkbox" name="select" onClick={this.handleClick.bind(this)}/>
                                <span />
                              </label>
                            </span> 
                </div>
                {this.state.isShowBody ? 
                    <div>
                        Data test
                    </div>
                : null}
            </div>
        );
    }
}

Answer 1

This might give you more insight in addition to what the previous answer is: Using Redux would definitely a good option but that entirely depends on the complexity of the project.

export class Toggle extends React.Component {
    constructor(){
        super();
        this.state={
            isShowBody: false
        } 
    }

    handleClick = (event) => {
        this.setState({ isShowBody: !this.state.isShowBody })
    }

    checkbox = () => {
        return (
            <span className="switch switch-sm" >
                <label>                                    
                    <input type="checkbox" name="select" onClick={() => this.handleClick(this)}/>
                </label>
            </span>
        )
    }

    dataTest = () => {
        return (
            <div>
                Data test
            </div>
        )
    }

    render() {
        return (
            <div>
                {this.checkbox()}
                {this.state.isShowBody && this.dataTest()}
                /**
                * You can extract this dataSet into another component as well where you can pass initial visibility value as this.state.isShowBody
                * for example
                * <Dataset visibility={this.state.isShowBody} />
                * */
            </div>
        );
    }
}

Answer 2

If you want the parent to have information the child has you need to left up the state to the parent component and pass it to the child.

If your component has the potential to become bigger, keeping lifting up the state will become a problem so consider using a state management library like Redux.