CODEWITHSUNDEEP
javascriptreactjs
Filth
Filth

Reputation: 3228

React JS onClick set state of clicked index

How can I update isSelected to true for the item that the user clicks on?

Here is my handleSelect function so far:

handleSelect(i) {
  //Get Genres
  let genres = this.state.allGenres;
  genres = genres.map((val, index) => {
    //val.isSelected = index === true;
    return val;
  }); 
  //Set State
  this.setState({
    allGenres: genres
  })
}

This function is passed down correctly via props and is working, the issue I'm having is with the logic.

The current logic sets all items in the array to true which is incorrect. I only want to update / toggle the state of the item the user clicked.

I have an array of objects within state, here is what one of the objects looks like: 

state = {
    allGenres: [
      {
        id: 1,
        genreTitle: 'Horror',
        isSelected: false,
      }
    ]
  }

Upvotes: 4

Views: 4749

Answers (4)

Jordan Enev
Jordan Enev

Reputation: 18644

Here's how we can do it:

  1. On each clicked Genre, we get its id.
  2. After we have the id, then we toggle the selected genre isSelected flag.
  3. Please follow updateGenres method, to check how we did it in an immutable way.
updateGenres(selectedId) {
   const { allGenres } = this.state

   this.setState({
     // Here we make sure we don't mutate the state
     allGenres: allGenres.map(genre => ({
        ...genre,
        // Toggle the clicked one, and reset all others to be `false`.
        isSelected: genre.id === selectedId
        // If you want to keep the values of the rest genres, then the check should be: 
        // isSelected: (genre.id === selectedId) ? !genre.isSelected : genre.isSelected
     }))
   })
}

renderGenres() {
  const { allGenres } = this.state

  return allGenres.map(genre => <Gengre onClick={() => this.updateGenres(genre.id) })
}

render() {
  return <div>{this.renderGenres()}</div>
}

The benefit of this approach is that you don't depend on the index of the allGenres and your toggle implementation will be decoupled to the presentation. Imagine if you change the genres sort (from ASC to DESC), then you have to change your toggle logic too.

Upvotes: 2

Mauricio Soares
Mauricio Soares

Reputation: 3640

I'll assume that you have some components being rendered, and that you want to click in these components... You could use bind and pass to the callback function the index of the array... for example:

class Component extends React.Component {
  constructor() {
    super();

    this.state = {
      allGenres: [{
        id: 1,
        genreTitle: 'Horror',
        isSelected: false
      }]
    }
  }

  handleSelect(i) {
    //Get Genres
    let genres = this.state.allGenres;
      genres = genres.map((val, index) => {
      val.isSelected = index === i;
      return val;
    });
    //Set State
    this.setState({
      allGenres: genres
    })
  }

  render() {
    const {allGenres} = this.state;

    return (
      <ul>
        :D
        {allGenres.map((genre, i) => (
          <li onClick={this.handleSelect.bind(this, i)}>
            {genre.genreTitle} {genre.isSelected && 'Is Selected'}
          </li>
        ))}
      </ul>
    );
  }
}

I'm using bind in the onClick callback from the li, this way I have access to the genre index in your callback.

There are some other ways of doing this though, since you have the id of the genre, you might want to use that instead of the index, but it's up to you to decided.

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

If the i passed to handleSelect is the index of the genre in the genres array then

handleSelect(i) {
  //Get Genres
  let genres = this.state.allGenres;
  genres = genres.map((val, index) => {
    val.isSelected = index === i;
    return val;
  }); 

  //Set State
  this.setState({
    allGenres: genres
  })
}

if the i refers to the id of the genre then

handleSelect(i) {
  //Get Genres
  let genres = this.state.allGenres;
  genres = genres.map((val) => {
    val.isSelected = val.id === i;
    return val;
  }); 
  //Set State
  this.setState({
    allGenres: genres
  })
}

Upvotes: 0

Midhun G S
Midhun G S

Reputation: 957

Easiest way is that maintain allGenres and selectedGenre separately in state
So handleSelect will be like

handleSelect(id) {
  this.setState({
    selectedGenre: id
  });
}

Upvotes: 0

Related Questions