Change html attribute value does not have data with onclick event using react

Question

I have these code,

export default MainContent = () => {
    handleClick = (e) => {
        const attr = e.target.getAttribute("aria-expanded");
    };

    return (
        <div aria-expanded='false' onClick={handleClick}>1</div>
        <div aria-expanded='false' onClick={handleClick}>2</div>
        <div aria-expanded='false' onClick={handleClick}>3</div>    
    );
}

What I need to do is set aria-expanded='true' when click. I can't make this to data-expanded. And I only need to change clicked item. Is there any way to do this?

Anton · Accepted Answer · 2021-11-02 21:23:12Z

First you need to wrap divs. Then set event to the wrapper to delegate it. Finally, have get the data from the attribute, handle it and putting back.

const MainContent = () => {
  const handleClick = (e) => {
    const attr = e.target.getAttribute("aria-expanded");
    // Check for attributes
    if (!attr) {
      return;
    }
    // Switch status
    const changeAttr = attr === "false" ? "true" : "false";
    // Set result back
    e.target.setAttribute("aria-expanded", changeAttr);
  };

  return (
    <section className="container" onClick={handleClick}>
      <div aria-expanded="false">1</div>
      <div aria-expanded="false">2</div>
      <div aria-expanded="false">3</div>
    </section>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
    <MainContent />,
  rootElement
);

div {
  display: flex;
  flex-flow: column;
  text-align: center;
  gap: 0.5em;
  padding: 1em;
  cursor: pointer;
}

div[aria-expanded="false"] {
  background-color: rgb(255, 179, 0);
}

div[aria-expanded="true"] {
  background-color: rgb(89, 0, 255);
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Dmitriif · Accepted Answer · 2021-11-02 18:58:22Z

1

You can create a new state, which you will change with onClick function and the value of aria-expanded will be dependent on this state

export default MainContent = () => {
  const [open, setOpen] = useState(false);
  const handleClick = (e) => {
    setOpen(!open);
    e.target.setAttribute("aria-expanded", open);
  };

    return (
        <div aria-expanded={expanded ? 'true' : 'false' } onClick={handleClick}>1</div>
        <div aria-expanded={expanded ? 'true' : 'false' } onClick={handleClick}>2</div>
        <div aria-expanded={expanded ? 'true' : 'false' } onClick={handleClick}>3</div>    
    );
}

Working Demo

edited Nov 2, 2021 at 18:58

answered Nov 2, 2021 at 18:26

Dmitriif

2,47314 silver badges24 bronze badges

2 Comments

vimuth Over a year ago

Thank but I need to set true only the clicked element attribute. So if I clicked first one other should remain false and the first one only true :)

Dmitriif Over a year ago

I've just updated the answer to make it work like you described and added a demo

abrar · Accepted Answer · 2022-10-03 07:37:42Z

0

I cant use this aria-expanded as react says:

The attribute aria-expanded is not supported by the role list.

how you've used aria-* attribute!!!

answered Oct 3, 2022 at 7:37

abrar

277 bronze badges

Collectives™ on Stack Overflow

Change html attribute value does not have data with onclick event using react

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related