SOURCE

function App(props) {
    return (
        <div>
            <Box1 name="apple"/>
            <Box2 name="cake"/>
        </div>
    )
}
class Box1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            number: 0
        }
    }
    add() {
        this.setState((state) =>{
            return {number:state.number +1}
        })
    }
    minus() {
        this.setState((state) =>{
            return {number:state.number -1}
        })
    }
    render() {
        return (
            <div className="red">
            {this.props.name}:
                <span>{this.state.number}</span>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.minus.bind(this)}>-</button>
            </div>
        )
    }
}
class Box2 extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            number :1
        }
    }
    add(){
        this.setState({
            number:this.state.number +1
        })
    }
    minus(){
        this.setState({
            number:this.state.number -1
        })
    }
    render(){
        return (
            <div>
            {this.props.name}:
                <span>{this.state.number}</span>
                <button onClick={this.add.bind(this)}>+</button>
                <button onClick={this.minus.bind(this)}>-</button>
            
            </div>
        )
    }
}


render()

function render() {
    ReactDOM.render(
        <App />,
        document.querySelector('#root')
    )
}

<div id="root">3333</div>

.red{
    border: 1px solid red;
}