Button onClick triggered when init in React application

Question

I'm trying to make a simple dropdown menu but I have some problems with onClick event on list items which are in child component, the 'handleClick' function is suppose to trigger when click on a list item, but the function is trigged twice when page loaded (because there are two lists here), and when I click on list again, it will trigger twice again, I'm sure it's a simple question but I passed few hours on it but I don't really understand what it happen here, hope someone can help me please, thx!

here is my code:

import React from 'react';
import Dropdown from './../elements/dropdown.js!jsx';

export class TestPage extends React.Component {

  constructor() {
    super();
    this.noteLIst = [
      {name: 'note', label: 'Note global'},
      {name: 'digitalCulture', label: 'Digital Culture'}
    ];
  }

  handleItemClick(company) {
    console.log(company);
  }

  render() {
    return (
      <div className="widget">
        <Dropdown list={this.noteLIst} selected={this.noteLIst[0]} whenItemClicked={this.handleItemClick} />
      </div>
    );
  }
}

Dropdown.js

import React from 'react';

export class Dropdown extends React.Component {

  constructor() {
    super();
    this.state = {
      listVisible: false
    };
  }

  showMenu() {
    this.setState({
      listVisible: true
    });
    document.addEventListener("click", this.hide);
  }

  hide() {
    this.setState({
      listVisible: false
    });
    document.removeEventListener("click", this.hide);
  }

  handleClick(item) {
    console.log(item); // Here will log 2 items
    this.props.whenItemClicked(item);
  }

  render() {
    let listItems = _.map(this.props.list, (list, index) => {
      return (
        <li key={index} className={list} onClick={this.handleClick(list)}>{list.name}</li>
      );
    });

    return (
      <div className = {"dropdown-container" + (this.state.listVisible ? " show" : "")}>
        <div className = {"dropdown-display" + (this.state.listVisible ? " clicked" : "")} onClick = {this.show}>
          <span>
            <img className="icon-arrow-bottom" src="build/image/arrow_bottom_black.png" />
          </span>
          <span>
            {this.props.selected.name}
          </span>
        </div>
        <ul className="dropdown-list" >
          {listItems}
        </ul>
      </div>
    );
  }
}

Answer 1

It should be noted that this works even when the function does not belong to this! Example:

config/GetFireBaseConfigFromEnv.ts

import dotenv from "dotenv";
import path from "path";
import { FirebaseOptions } from "firebase/app";

const GetFireBaseConfigFromEnv = (): => {
  dotenv.config({path: path.resolve(__dirname, "../.env.development")});

  const config: FirebaseOptions = {
      apiKey: process.env.API_KEY,
      appId: process.env.APP_ID,
      authDomain: process.env.AUTH_DOMAIN,
      measurementId: process.env.MEASUREMENT_ID,
      messagingSenderId: process.env.MESSAGING_SENDER_ID,
      projectId: process.env.PROJECT_ID,
      storageBucket: process.env.STORAGE_BUCKET
  };

  return config;
}

export default GetFireBaseConfigFromEnv;

auth/SignInWithGoogle.ts

import { GoogleAuthProvider, Auth, signInWithPopup } from "firebase/auth";

const SignInWithGoogle = (auth: Auth): void => {
  const provider: GoogleAuthProvider = new GoogleAuthProvider(auth);
  signInWithPopup(auth, provider);
}

export default SignInWithGoogle;

components/app.ts

import React, { JSX } from "react";
import GetFireBaseConfigFromEnv from "config/GetFireBaseConfigFromEnv";
import SignInWithGoogle from "auth/SignInWithGoogle";

const App: React.FC = (): JSX.Element => {
  return (
    <>
      <div>
        <h1>App</h1>
        <button onClick={SignInWithGoogle.bind(this, GetFireBaseConfigFromEnv())}
          value="Login with Google"/>
      </div>
    </>
  );
}