How can I make the plaintext hidden when expanding the second text?

Question

JavaScript

Now each MainBlock component opens and closes separately from the others, but now how to make the first component with text close itself when you expand the second

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

don't keep it to yourself, swipe the id of the active element up to the parent, the individual element should not care about that

// 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} />
)}