How to style selected element inside map function in reactjs

Question

I am trying to put style on the selected div onClick

 let woods =  pageURL.map( (wood, key)=> {

        if(wood.internal_doors_style[0] ===  this.state.slug_style) {
         if(this.state.selected) {
                   sel = 'red'
            }
            return (

                <div style={{background: sel}}  key={wood.id}  className="menu-item wood-item filter-wood" id={wood.id}  onClick={()=> this.setW(wood.internal_doors_wood[0])}>
                    <img src={wood.acf.wood_image.url} alt="" width="40"/>
                    <span className="span">{wood.acf.woods_title}</span>
                </div>

            )
        }
    })

the problem I am having that the style is applying on all the element not the selected one only.

  this.setState({
        slug_wood: w,
        selected: !this.state.selected


    })
    return single_data =  <SingleInternal wood={this.state.slug_wood} style={ this.state.slug_style}/>


}

is there a way maybe to target the id of each element where I set the id of each element to be unique id={wood.id}

aravind_reddy · Accepted Answer · 2018-05-12 11:52:49Z

0

Store the id of the selected element in the state variable and every time you select an element change the state variable to the selected id then inside the map check if the value of the selected id is equal to the element id or not if yes then set the selected element style otherwise set the style to unset. Considering selectedId to be the name of the state variable and onClick setState:

 let woods =  pageURL.map( (wood, key)=> {

        let sel=unset
        if(this.state.selectedId === wood.id){
            sel = 'red' 
           }
            return (

                <div style={{background: sel}}  key={wood.id}  className="menu-item wood-item filter-wood" id={wood.id}  onClick={()=> this.setState({selectedId: wood.id})}>
                    <img src={wood.acf.wood_image.url} alt="" width="40"/>
                    <span className="span">{wood.acf.woods_title}</span>
                </div>

            )
        }
    })

answered May 12, 2018 at 11:52

aravind_reddy

5,4964 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mars2024 Over a year ago

Im having trouble understanding this

Collectives™ on Stack Overflow

How to style selected element inside map function in reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related