CODEWITHSUNDEEP
reactjs
shalin
shalin

Reputation: 373

display Popup only on selected element

I have rendered the repeated elements in the component. When i click a particular component, a popup should be displayed on the particular component only. Now i got the popup message on all the elements. How to clear this issue?

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

Upvotes: 0

Views: 139

Answers (1)

Ori Drori
Ori Drori

Reputation: 193250

Identify the clicked node by a unique property, such as 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
   )}}}

Upvotes: 1

Related Questions