Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – onClick not working in a component – Reactjs

I’m making a small React project and in a dropdown, I’m using onClick and calling a function in it.

Here, I’m mapping the data which I get by typing the keywords. For each data, I’m calling a different component called SearchItems.

import React from "react";

const SearchItems = ({ item }) => {
  const handleClick = () => {
    console.log("I'm Clicked");
  };
  return (
    <div className="px-1 hover:bg-green-200 hover:rounded-md w-48">
      <button onClick={handleClick}>
        {item.name},{" " + item.country}
      </button>
    </div>
  );
};

export default SearchItems;

Here onClick is not working, as soon as I click an option nothing logs on the console.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got the solution for my problem, here I'm calling this component multiple times and this component becomes the option of a dropdown list, so each list item has this button element. If I click any one of it then there is no unique identifier to know which button is clicked. So, if some unique identifier attribute like id is added here then onClick will work as usual.


  2. 0

    It seems correct, do you not receive any errors in the browser console? Have you tried with the addEventListener?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search