表示選択した要素のポップアップ

Question

コンポーネントに繰り返し要素をレンダリングしました。特定のコンポーネントをクリックすると、特定のコンポーネントにのみポップアップが表示されます。今私はすべての要素のポップアップメッセージを得た。この問題を解決するには？

class Display extends component{ 
constructor(props){ 
    super(props); 
    this.state={showResult:false}; 
} 
renderList(){ 
return this.props.cars.attribute.map((car) => { 
    return (
    <div key={car.attribute_name} className="col-sm-4" > 
     <div className="panel-body back-img" onClick={()=> this.setState({showResult:true})}> 
      <div className="row"> 
       <div className="col-sm-6 incrementer"> 
        <span className="titleclass"> Hala </span> 
       </div> 
      </div> 
     </div> 
    </div> { this.state.showResults ? <Results /> : null } 
    )}}} 

    class Results extends Component{ 
    render(){ 
    return(<div id="results" className="search-results"> 
     Some Results 
      </div>); }} 

Answer 1

などattribute_nameなど、ユニークなプロパティでクリックされたノードを特定します

return this.props.cars.attribute.map((car) => { 
    return (
    <div key={car.attribute_name} className="col-sm-4" > 
     <div className="panel-body back-img" onClick={()=> this.setState({showResult:true, attributeName: car.attribute_name})}> // store the current car.attribute_name in the state 
      <div className="row"> 
       <div className="col-sm-6 incrementer"> 
        <span className="titleclass"> Hala </span> 
       </div> 
      </div> 
     </div> 
    </div> { this.state.showResults && this.state.attributeName === car.attribute_name ? <Results /> : null } // only show results if the current attribute name in the state is the same as the item's 
    )}}}