Как скрыть другие div по клику? только один div должен отображаться одновременно в реакции js

Question

У меня четыре divs Я хочу отображать только один div за раз.

Теперь div показывает onClick в соответствии с соответствующей кнопкой, но я хочу, чтобы, когда я нажимаю на кнопку, должен отображаться только относительный div другие div должны быть скрыты. как я могу это сделать?

Что я пробовал: _

 constructor(){
        super();
        this.state={
            firstDiv:false,
            secondDiv:false,
            thirdDiv:false,
            fourthDiv:false,
        }
    }
    
    
 render(){
        return(
            <div>
            
<ul>
<li onClick={()=>{this.setState({firstDiv:true})}}>First Btn</li>
<li onClick={()=>{this.setState({secondDiv:true})}}>Second Btn</li>
<li onClick={()=>{this.setState({thirdDiv:true})}}>Third Btn</li>
<li onClick={()=>{this.setState({fourthDiv:true})}}>Fourth Btn</li>
</ul>
            

{
    this.state.firstDiv ?
    <div>first Div</div>
:null        
}

{
    this.state.secondDiv ?
    <div>second Div</div>
:null        
}

{
    this.state.thirdDiv ?
    <div>third Div</div>
:null        
}

{
    this.state.fourthDiv ?
    <div>fourth Div</div>
:null        
}


            </div>
)
}

Спасибо!

Answer 1

Можно использовать что-то вроде этого. Div будет отображаться на основе числа.

// Example class component
class ReactComponent extends React.Component {
  
  state = {
    visibleDiv: 0
  }
  switchVisibleDiv(divNumber) {
    this.setState({...this.state, visibleDiv: divNumber})
  }
  
  render() {
    return (
      <div>
        <ul>
          <li onClick={()=> this.switchVisibleDiv(1)}>set div 1</li>
          <li onClick={()=> this.switchVisibleDiv(2)}>set div 2</li>
          <li onClick={()=> this.switchVisibleDiv(3)}>set div 3</li>
          <li onClick={()=> this.switchVisibleDiv(4)}>set div 4</li>
        </ul>
        {this.state.visibleDiv === 1 ? <div>Div 1</div> : ''}
        {this.state.visibleDiv === 2 ? <div>Div 2</div> : ''}
        {this.state.visibleDiv === 3 ? <div>Div 3</div> : ''}
        {this.state.visibleDiv === 4 ? <div>Div 4</div> : ''}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <ReactComponent />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Вы можете инициализировать переменную, в которой хранится то, что вы хотите показать. Установите для нее имя div, которое вы хотите отображать при нажатии кнопки li.

 constructor(){
        super();
        this.state={
           showDiv: null
        }
    }
    
    
 render(){
        return(
            <div>
            
<ul>
<li onClick={()=>{this.setState({showDiv:'first'})}}>First Btn</li>
<li onClick={()=>{this.setState({showDiv:'second'})}}>Second Btn</li>
<li onClick={()=>{this.setState({showDiv:'third'})}}>Third Btn</li>
<li onClick={()=>{this.setState({showDiv:'fourth'})}}>Fourth Btn</li>
</ul>
            

{
    this.state.showDiv==='first' ?
    <div>first Div</div>
:null        
}

{
   this.state.showDiv==='second'?
    <div>second Div</div>
:null        
}

{
    this.state.showDiv==='third'?
    <div>third Div</div>
:null        
}

{
    this.state.showDiv==='fourth'?
    <div>fourth Div</div>
:null        
}


            </div>
)
}