All buttons close on click of one button-CodePudding

please i am building a FAQs page and i made a series of buttons which when clicked displays a hidden paragraph underneath each button, now the issue is all buttons respond to one button being clicked on and they all display their respective paragraphs, i want each button to display it's own hidden paragraph alone.

this is the react code i used

class FAQ extends React.Component {
    constructor () {
      super()
      this.state = {
        isHidden: true,
      }
    }

    toggleHidden () {
      this.setState({
        isHidden: !this.state.isHidden})
    }

            <div className="faq--button">
                <button onClick={this.toggleHidden.bind(this)}>button to click</button>
                {!this.state.isHidden && <p>lorem ipsum"</p>}
            </div>

CodePudding user response：

Currently isHidden is used for all buttons, which will have the same effect in each button. So you need to add separate states for each button. Like isHidden2, isHidden3....