切換顯示/隱藏到特定元素

Question

我有這個特殊的代碼，它顯示了每個問題和按鈕的列表。當我點擊按鈕時，它會顯示問題的具體答案。我的問題是，我有一堆問題，當我點擊按鈕時，它會顯示所有答案，而不是該問題的具體答案。

下面是代碼

class App extends React.Component { 
constructor(){ 
    super() 
    this.state = { 
        answer: [], 
        isHidden: true 
       } 
    this.toggleHidden = this.toggleHidden.bind(this) 
} 

componentWillMount(){ 
    fetch('http://www.reddit.com/r/DrunkOrAKid/hot.json?sort=hot') 
    .then(res => res.json()) 
    .then((data) => { 
     const answer = data.data.children.map(obj => obj.data); 
     this.setState({answer}); 
    }) 
} 

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

render(){ 
    const answer = this.state.answer.slice(2) 
    return <div> 
      <h1>Drunk or Kid</h1> 
      {answer.map(answer => 
       <div key={answer.id}> 
       <p className="title">{answer.title}</p> 
       <button onClick={this.toggleHidden}>Answer</button> 
       {!this.state.isHidden && <Show>{answer.selftext}</Show>} 
       </div> 
      )} 
      </div> 
    } 
} 
const Show = (props) => <p className="answer">{props.children}</p> 

這裏是鏈接到codepen

Answer 1

這裏是一個Codepen根據我的建議：

的子組件的基礎是：

class Question extends React.Component { 
    // Set initial state of isHidden to false 
    constructor() { 
    super(); 
    this.state = { 
     isHidden: false 
    } 
    } 
    // Toggle the visibility 
    toggleHidden() { 
    this.setState({ 
     isHidden: !this.state.isHidden 
    }); 
    } 
    // Render the component 
    render() { 
    const { answer } = this.props; 
    return (
     <div key={answer.id}> 
     <p className="title">{answer.title}</p> 
     <button onClick={() => this.toggleHidden() }>Answer</button> 
     {this.state.isHidden && <Show>{answer.selftext}</Show>} 
     </div> 
    ); 
    } 
} 

然後你會映射在其父組件內：

answer.map(answer => 
    <Question answer={answer} key={answer.id} /> 
)