CODEWITHSUNDEEP
javascriptreactjsuse-ref
ltcrawsh
ltcrawsh

Reputation: 102

How to target DOM and change style in react with mapped elements

I have a multi page form that renders a list of buttons for each possible answer.

I am currently using getElementByID to change the button style when a button is clicked. I think this is not considered good practice in react.

can I use the useRef hook to target the DOM element and change its style instead of using getElementByID if the buttons are dynamically displayed with map?

{answers.map((answer, count = 0) => {
        return (
          <Button
            key={count}
            id=`button${count}`
            onClick={(e) => {        
              document.getElementById(`${e.currentTarget.id}`).style.color = "white";
            }}
          >
            <ButtonTitle>{answer.name}</ButtonTitle>
          </Button>
        );
      })}

(animations on safari are breaking the active style, so I can't use the active pseudo element)

Upvotes: 1

Views: 572

Answers (1)

BTSM
BTSM

Reputation: 1663

You can do this by adding a new state and toggle active class by that state. Code something like this.

const [activeindex, setActiveIndex] = useState("");

return(
<>
{answers.map((answer, count = 0) => {
        return (
          <Button
            key={count}
            className={count==activeindex?"acvie":""}
            onClick={(e) => {        
              setActiveIndex(count)
            }}
          >
            <ButtonTitle>{answer.name}</ButtonTitle>
          </Button>
        );
      })}
}
</>

And use .active class in css file.

Upvotes: 2

Related Questions