react change the class of list item on click

Question

I have a react element like this:

import React, { PropTypes, Component } from 'react'

class AlbumList extends Component {

  constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick() {
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }

  render() {
    var album_list
    const {user} = this.props
    if(user.data){

        list = user.data.filter(album => album.photos).map((album => {
                        return  <div className={"col-sm-3"} key={album.id}>
                        <div className={this.state.class} key={album.id} onClick={this.handleClick.bind(this)}>
                          <div className={"panel-heading"}>{ album.name }</div>
                          <div className={"panel-body"}>
                            <img className={"img-responsive"} src={album.photo.source} />
                          </div>
                                </div>
                        </div>
                         }))
                 }

    return (
      <div className={"container"}>
        <div className="row">
          {list}
        </div>
      </div>
    )
  }
}

export default AlbumList

Here map gives the list of filter data as I wanted. Here what I am doing changes the class of all the list element if I click on one.

I am getting the class name from this.state.class

How can I change the class of only element that i have clicked..

Thanks in advance ...

Winsky Wen · Answer 1 · 2016-02-16T10:29:21.390

3

I have considered it once.So you have so many divs and you want to know which is clicked.My way to solve this problem is to give a param to the function handleClick and you can get the dom of the div while you click the div.Like this:

array.map(function(album,index){
  return <div onClick={this.handleClick}/>
})

handleClick(e){
  console.log(e.target);
  e.target.className = 'active';
  ...
}

Then you have a param for this function.While you can use the e.target to get the dom of your div which is clicked.

There are some mistake into your code about the state.class.

class AlbumList extends Component {
  constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick(e) {
    if(e.target.class === 'active'){
      e.target.className = 'album'
    }else{
      e.target.className = 'active'
    }
  }

  render() {
    var album_list
    const {user} = this.props
    if(user.data){
      list = user.data.filter(album => album.photos).map((album => {
        return (
          <div className={"col-sm-3"} key={album.id}>
            <div className='active' key={album.id} onClick={this.handleClick.bind(this)}>
              <div className={"panel-heading"}>{ album.name }</div>
              <div className={"panel-body"}>
                <img className={"img-responsive"} src={album.photo.source} />
              </div>
            </div>
          </div>
        )
      }))
    }
    return (
      <div className={"container"}>
        <div className="row">
          {list}
        </div>
      </div>
    )
  }
}

You can try this and tell me anything wrong.

edited Feb 16 '16 at 10:29

answered Feb 16 '16 at 08:40

Winsky Wen

74
3

Where I have dont `state.class.name` that I want to change the class... and yes div has unique name with`key` parameter – varad Feb 16 '16 at 08:44
I make some mistake.You can just get the dom and change the className of this dom.You can not change the class directly, but can change the className and React will give it to the class . – Winsky Wen Feb 16 '16 at 08:57
In my above code I have `onClick` method on specific class. I am following your idea but then when I click on any class in it returns `target` . I assume it should only return target of clicked div – varad Feb 16 '16 at 10:04
It does only return target of the clicked div. – Winsky Wen Feb 16 '16 at 10:20
2

While the target is the div which you clicked,but everyone share one state.So you can not use the state to control the class. – Winsky Wen Feb 16 '16 at 10:32
I mean to say where I have put `onClick` even , that div should only be clicked right but here in panel any div I clicked is returned in target.. – varad Feb 16 '16 at 10:45
What I want is whatever they click the div where I have put `onClick` even should be returned and I should change that div to active – varad Feb 16 '16 at 10:47
I my code I have three div with classes `active` `panel-heading` `panel-body` ... I have `onClick` method on `active` class div but when when I click on `panel-heading` it is giving me its class instead of `active` class. Whatever I click it should return `active` class – varad Feb 16 '16 at 11:11
The target which is returned to you is the one which have the onClick function.Did you try the code I give to you? – Winsky Wen Feb 17 '16 at 01:45

react change the class of list item on click

1 Answers1

Linked