特定の要素に表示/非表示を切り替えます

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