0

Сейчас каждый компонент 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>
    )
  }
}

1 ответ 1

0

Введите true and false, когда нажимаете на второй компонент соответственно меняется на true и закроется

1
  • можете уточнить куда именно ввести
    – user344376
    22 фев 2020 в 12:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.