React conditionally opening different divs - reactjs

Question

I am trying to conditionally open divs two and three, take a look at following snippet. showThird works correct however, showSecond has no effect? Basically on showSecond div-one shrinks to 50% width and div-two appears in rest 50%. Similar with div-third.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showSecond: false,
showThird: false
}
this.showDivTwo = this.showDivTwo.bind(this)
this.showDivThree = this.showDivThree.bind(this)
}
showDivTwo() {
this.setState(prevState => ({showThird: false, showSecond: !prevState.showSecond}))
console.log(this.state)
}
showDivThree() {
this.setState(prevState => ({ showSecond: false, showThird: !prevState.showThird}))
console.log(this.state)
}
render() {
return (
<div className={'wrapper' + (this.state.showSecond ? ' show' : '', this.state.showThird ? ' show' : '')}>
<div className="one">one
{/* Show second */}
<div>
<button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button>
</div>
{/* Show third */}
<div>
<button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
</div>
</div>
<div className="three">three
<div>
<button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
</div>
</div>
<div className="two">two
<div>
<button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button>
</div>
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
.wrapper {
overflow: hidden;
white-space: nowrap;
}
.one, .two, .three {
background: #333;
border: 2px solid #787567;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-family: arial;
overflow: hidden;
padding: 20px;
text-align: center;
transition: border 0.2s, padding 0.2s, width 0.2s;
min-height: 50vh;
}
.one {
width: 100%;
}
.two {
border-width: 2px 0;
padding: 20px 0;
width: 0;
}
.three {
border-width: 2px 0;
padding: 20px 0;
width: 0;
}
.show .one, .show .two, .show .three {
border-width: 2px;
padding: 20px;
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
What am I doing wrong here?

Answer 1

Changes:
1- use this condition:
className={'wrapper' + (this.state.showSecond || this.state.showThird ? ' show' : '')}
2- Use one more class hide, and put the check on className, apply that class if you want to hide the div otherwise apply class two or three.
Check the working code:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showSecond: false,
showThird: false
}
this.showDivTwo = this.showDivTwo.bind(this)
this.showDivThree = this.showDivThree.bind(this)
}
showDivTwo() {
this.setState(prevState => ({showThird: false, showSecond: !prevState.showSecond}))
console.log(this.state)
}
showDivThree() {
this.setState(prevState => ({ showSecond: false, showThird: !prevState.showThird}))
console.log(this.state)
}
render() {
return (
<div className={'wrapper' + (this.state.showSecond || this.state.showThird ? ' show' : '')}>
<div className="one">
one
<div>
<button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button>
</div>
<div>
<button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
</div>
</div>
<div className={this.state.showThird?"three":'hide'}>
three
<div>
<button onClick={this.showDivThree}>{this.state.showThird ? 'hideThird' : 'showThird'}</button>
</div>
</div>
<div className={this.state.showSecond ? "two" : 'hide'}>two
<div>
<button onClick={this.showDivTwo}>{this.state.showSecond ? 'hideSecond' : 'showSecond'}</button>
</div>
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
.wrapper {
overflow: hidden;
white-space: nowrap;
}
.hide, .one, .two, .three {
background: #333;
border: 2px solid #787567;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-family: arial;
overflow: hidden;
padding: 20px;
text-align: center;
transition: border 0.2s, padding 0.2s, width 0.2s;
min-height: 50vh;
}
.one {
width: 100%;
}
.hide {
border-width: 2px 0;
padding: 20px 0;
width: 0;
}
.show .one, .show .two, .show .three {
border-width: 2px;
padding: 20px;
width: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>