React onClick event not working as expected inside loop

Question

This is my code,

import "./styles.css";
import React from "react";

export default function App() {
  const categories = [
    { name: "aaa", slug: "aaa" },
    { name: "baa", slug: "baa" }
  ];

  const handleClick = (value) => {
    console.log(value);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <ul>
          {categories.map((category) => (
            <li className="cat_item" key={category.slug}>
              <a
                value="value"
                onClick={(e) => handleClick(e.currentTarget.value)}
                className="dropdown-item"
              >
                {category.name}
                <span className="text-gray-25 font-size-12 font-weight-normal"></span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

But whn I click it appear as undefined instead of value in log. Here is a fiddle of issue

use e.target.value instead

A.Burdonskaya
– A.Burdonskaya

2022-04-23 08:25:50 +00:00
Commented Apr 23, 2022 at 8:25 — A.Burdonskaya
– A.Burdonskaya, Commented Apr 23, 2022 at 8:25
Thanks. Tried but still the same unfotunately.

vimuth
– vimuth

2022-04-23 08:28:58 +00:00
Commented Apr 23, 2022 at 8:28 — vimuth
– vimuth, Commented Apr 23, 2022 at 8:28

vimuth · Accepted Answer · 2022-04-23 09:07:01Z

2

This is because the target is the HTML anchor element itself and thus doesn't have a value property associated with it. In your case, I'm assuming you want to get the text within the your anchort element, try this instead.

onClick={(e) => handleClick(e.target.textContent)}

And we can use this for custom attributes,

onClick={(e) => handleClick(e.target.attributes.getNamedItem("value").value)}

Source is here

edited Apr 23, 2022 at 9:07

vimuth

5,87356 gold badges98 silver badges128 bronze badges

answered Apr 23, 2022 at 8:36

mynameisgeoff123

964 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aakash Limbani · Accepted Answer · 2022-04-23 09:19:23Z

2

you have try to pass the value. But here no any input field that's why undefined here. You have try to pass innerText content.

onClick={(e) => handleClick(e.currentTarget.innerText)}

answered Apr 23, 2022 at 9:19

Aakash Limbani

1531 gold badge1 silver badge9 bronze badges

Collectives™ on Stack Overflow

React onClick event not working as expected inside loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related