How to add class to the current element in map statement

Question

I am using a class component in react and would like to know how I can add a CSS class to the current i.e clicked element which is inside a map statement. I would like to do it using state.

<div key={q.id} id={q.id}>
    <h2 className={this.state.title}>{q.title}</h2>
    <h3>{q.questionText}</h3>
    <div key={q.id}>
        {q.options.map((opt, index) => (
            <div
                key={opt.id}
                val={opt.val}
                ref={this.options}

                className={index === this.state.clickedItem ? 'myclass' : null}
                onClick={() => this.setState({ clickedItem: index })}>

                <p onClick={this.submitQuestion} ref={this.correctRef}>
                    {opt.text}
                </p>
            </div>
        ))}
</div>

I pretty much tried everything that I could possibly find on the internet I have spent days on this none of the examples I found work. This is so easy to do with jquery but I don't understand why react doesn't have a simple solution for this. — Donald, Jul 16 '19 at 13:33
may be dup of https://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component — Slabgorb, Jul 16 '19 at 13:45
What is your expectation with setting these attributes twice? (className, ref) — Slabgorb, Jul 16 '19 at 13:48
Your code is working fine to add custom class based on item clicked. — ravibagul91, Jul 16 '19 at 13:52
no class is added for me when I click the items it just adds it on the first item — Donald, Jul 16 '19 at 13:56

score 2 · Answer 1 · answered Jul 16 '19 at 13:15

2

Here your state

state = {clickedItem: 0}

in render

yourArray.map((el, index) => {
  <div 
  onClick={() => this.setState({clickedItem: index})} 
  key={index} 
  className={index === this.state.clickedItem ? 'Your ClassName' : null}>
   {el.name}
  </div>
})

answered Jul 16 '19 at 13:15

makkagru

39
1

1

Why you are taking efforts when OP not taking any efforts. – ravibagul91 Jul 16 '19 at 13:18
I tried this but it doesn't seem to work it only adds the class to the first element in the array – Donald Jul 16 '19 at 13:25
@Donald By default it will add class to first element only because `state = {clickedItem: 0}`, when you click next element that item gets class. – ravibagul91 Jul 16 '19 at 13:54
Thanks but for me it doesn't add to the other items when clicked – Donald Jul 16 '19 at 13:59
Apologies it's working I had another onclick on the nested p tag which when I removed this it worked! Many thanks. – Donald Jul 16 '19 at 14:02

Nevada · Answer 2 · 2021-03-16T00:47:31.103

In functional with useState hook, without class. Hope this can help.

https://codesandbox.io/s/blissful-boyd-6px43?file=/src/App.js

import "./styles.css";
/*
.is-checked {
  background-color: #901c1c;
  color: white;
}
*/


import React, { useState } from "react";

const App = () => {
  const tags = ["portrait", "événements", "voyage", "animaux"];
  const [clickedItem, setClickedItem] = useState(null);

  const handleCSS = (e) => {
    e.preventDefault();
    let selectedTag = e ? parseInt(e.target.id, 10) : null;
    setClickedItem(selectedTag);
    console.log(">> clickedItem", clickedItem);
  };

  return (
    <>
      <div className="App">
        <h1>Hello !</h1>
      </div>

      <div>
        {tags.map((tag, index) => {
          return (
            <button
              type="button"
              key={index}
              onClick={handleCSS}
              id={index}
              className={index === clickedItem ? "is-checked" : null}
            >
              {`#${tag}`}
            </button>
          );
        })}
      </div>
    </>
  );
};

export default App;

How to add class to the current element in map statement

2 Answers2