React refers to how the same component makes state independent

as shown in the code

    class Listbox extends React.Component {
        constructor(props) {
            super(props);
            this.state={
                isActive: true
            }
        }
        removeClass = e => {
            this.setState({isActive: false})
        }
        render() {
            return (
                <div className="ListBox" style={{height: `${this.props.ListHeight}`}}>
                    
                    <div className="titleArea">
                        <span className="title">
                            {this.props.title}
                        </span>
                        <span className="subTitle">{this.props.subTitle}</span>
                    </div>
                    {this.props.tabs ? (
                        <div><Button className={{isActive: this.state.isActive}}>7</Button><Button onClick={this.removeClass}>30</Button></div>
                    ):""}
                    <div className="content" style={{height: `${this.props.contentHeight}`}}>
                        {this.props.children}
                    </div>
                </div>
            )
        }
    }

how can Listbox components be referenced in two places to make isActive independent of each other?

Mar.21,2021

components and components do not affect each other. They all have their own isActive that does not affect each other


isActive is a local property, and only Listbox components can be modified and independent of each other

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3b600-40816.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3b600-40816.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?