Как сделать чтобы открытый текст скрывался при развертке второго текста?

Question

[MbIW]

Сейчас каждый компонент MainBlock открывается и закрывается отдельно от других, а как сделать теперь чтобы первый компонент с текстом закрывался сам, когда разворачиваешь второй

component FAQ

const faqList = [
  {
    id: 1,
    question: "На каких пляжах Пхукета спокойное море в октябре",
    answer: "Во второй половине октябре достаточно спокойное море на пляже Банг-Тао."
  },
  {
    id: 2,
    question: "Есть ли ядовитые медузы на пляжах Пхукета",
    answer: "Во второй половине октябре достаточно спокойное море на пляже Банг-Тао."
  }]

    export default class FAQ extends React.Component {
  render(){


    return (
      <div>
        {faqList.map( data =>              
          <MainBlock data={data} />
        )}
    </div>
    )
  }
}

component MainBlock

export default class MainBlock extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
        stateAnswer: true 

    }
  }

  handleClick = () => {
    this.setState(state =>({
        stateAnswer : !state.stateAnswer,
        
    })) 
  }

  render() {        
    return (
      <div>
        <div >
          {this.props.data.question}
          <button  onClick={this.handleClick} ><img src={arrow} /></button>
          <div style={{display: (this.state.stateAnswer ? 'none' : 'block')}}  >                   
            {this.props.data.answer}                  
          </div>
        </div>
      </div>
    )
  }
}

Answer 1

[hzzzzl]

не держи это в себе, прокидывай айди активного элемента наверх в родителя, отдельному элементу должно быть пофиг на это

// MainBlock
  handleClick = () => {
    this.props.setActive(props.data.id)
  }

// в class FAQ

setActive = id => { this.setState({ activeId: id }) }

...

{faqList.map( data =>              
  <MainBlock data={data} active={data.id === this.state.activeId} setActive={this.setActive} />
)}

Comments

[MbIW]

что то я сделал не так

//class FAQ

export default class FAQ extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        stateAnswer: true ,
        activeId: ""
    }
  }

  setActive = id => { this.setState({ activeId: id, stateAnswer: !this.state.stateAnswer }) }
  

  render(){



    return (
      <div>
        {faqList.map( data =>              
          <MainBlock data={data} active={data.id === this.state.activeId} setActive={this.setActive} stateAnswer={this.state.stateAnswer}/>
        )}
    </div>
    )
  }
}

// class mainBlock

export default class MainBlock extends React.Component {


  handleClick = () => {
    this.props.setActive(this.props.data.id)
  }

  render() {        
    return (
      <div>
        <div  className="wrap-full-txt">
          {this.props.data.question}
          <button  onClick={this.handleClick} className="more-full">свернуть</button>
          <div  style={{display: (this.props.stateAnswer ? 'none' : 'block')}} className="wrap-full-txt">                   
            {this.props.data.answer}                  
          </div>
        </div>
      </div>
    )
  }
}

все вместе открываются тексты

[hzzzzl]

MbIW, эммм, а где ты в MainBlock используешь this.props.active?
моя идея была в том, чтобы по active добавлять класс "развернуто", по умолчанию чтобы все блоки были свернуты при active = false

<div  className={`wrap-full-txt ${this.props.active ? 'active' : ''}`}>

как-то так ^

[MbIW]

ага, получилось, теперь при открытии второй первая закрывается, здорово, спасибо, но сейчас не получается самому свернуть текст, что еще не так?)

export default class MainBlock extends React.Component {


  handleClick = () => {
    this.props.setActive(this.props.data.id)
  }

  render() {        
    return (
      <div>
        <div >
          {this.props.data.question}
          <button  onClick={this.handleClick} >свернуть</button>
          <div  style={{display: (this.props.active ? 'block' : 'none')}} className="wrap-full-txt">                   
            {this.props.data.answer}                  
          </div>
        </div>
      </div>
    )
  }
}

[MbIW]

дописал handleClick

handleClick = () => {
    if(this.props.active == false){
      this.props.setActive(this.props.data.id)
    }else{
      this.props.setActive(false)
    }
  }