Question 72678 in Reactjs Question posted in
The new location for the React Documentation can be found here.

onClick on div is not working with the react js – Reactjs

Child component Code

import { Avatar, Modal, Button } from "flowbite-react";
import { HiPlay, HiCheck, HiCheckCircle  } from 'react-icons/hi';

export default function SearchResult({ influencer, imagePath }, props) {
    return <div key={influencer?.id} className="flex my-3 w-full cursor-pointer" onClick={() => { props.click}}>
    <Avatar
        size="xs"
        img={imagePath + influencer?.im}
        rounded={true}
    />
    <div className="flex w-[88%]">
    <div className="px-2 text-gray600 text-text-sm font-semibold">{influencer?.social_user_name}</div>
    <div className="text-gray600 text-text-sm">{influencer?.social_name}</div>
    </div>
    <div className="mt-[5px] mx-2 min-w-[16px]">{influencer?.verified ? <HiCheckCircle fill="#1C64F2"  /> : ' ' }</div>
    <div className="mt-[5px] mx-2 min-w-[16px]">{influencer?.isTrending ? <HiCheck fill="#1C64F2"  />: ' ' }</div>
</div>
}

Parent component Code

const showSearchResult = () => {
        return topTrendList.map((influencer) => {
            return  <SearchResult imagePath={topImagePath} click={() => handleSearchInput(influencer)} influencer={influencer}></SearchResult>
        })
    }
// click function
const handleSearchInput = (item) => {
        console.log(item);
    }

Using react functional component to handle click the div
added the function of click

If i remove arrow function from SearchResult it called multiple times. If arrow function added it’s not calling the handleSearchInput function.

Tags:

2

Answers


  1. 0

    Child component

    Mistake that you were doing: You were calling the click function in the wrong way.

    Your code: onClick={() => { props.click}}

    Correct code: onClick={() => { props.click()}} or onClick = {props.click}

    export default function SearchResult({ influencer, imagePath, click }) {
  return (
    <div
      key={influencer?.id}
      className="flex my-3 w-full cursor-pointer"
      onClick={() => click()}
    >
      {" "}
      <Avatar size="xs" img={imagePath + influencer?.im} rounded={true} />{" "}
      {influencer?.social_user_name} {influencer?.social_name}{" "}
      {influencer?.verified ? ":" : ""} {influencer?.isTrending ? ":" : ""}{" "}
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Firstly, regarding your code, you should not use click as you didn’t declare this name before declare it in the Child component.

    Secondly, the way you declare the input parameters of the Child is not correct. It should look like this: SearchResult({ influencer, imagePath, click }).

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

Back To Top
Search