I just started with React and this is my first project. I added a delete icon. I just want when press it a console log will show some text just for testing and knowing how the props are passing between components. The problem is this text is not showing in the console. Please if anyone can help with that, I would appreciate it.

I have user components, allUser component, home component which included in the app.js

User.js component

import "./User.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";

function User(props) {
  return (
    <div className="singleUser">
      <div className="user">
        <div>{props.id}</div>
        <div>{props.name}</div>
        <div>{props.phone}</div>
        <div>{props.email}</div>
      </div>

      <div className="iconClose">
        <FontAwesomeIcon icon={faTimes} onClick={() => props.onDelete} />
      </div>
    </div>
  );
}

import User from "./user";
import { useState, useEffect } from "react";

function Allusers({ onDelete }) {
  const [isLoading, setIsLoading] = useState(false);
  const [actualData, setActualData] = useState([""]);

  useEffect(() => {
    setIsLoading(true);
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        // const finalUsers = [];
        // for (const key in data) {
        //   const u = {
        //     id: key,
        //     ...data[key],
        //   finalUsers.push(u);
        // }
        setIsLoading(false);
        setActualData(data);
      });
  }, []);
  if (isLoading) {
    return (
      <section>
        <p>Loading ... </p>
      </section>
    );
  }
  return actualData.map((singlUser) => {
    for (const key in singlUser) {
      // console.log(singlUser.phone);
      return (
        <div className="userCard" key={singlUser.id}>
          <User
            id={singlUser.id}
            name={singlUser.name}
            email={singlUser.email}
            phone={singlUser.phone}
            key={singlUser.id}
            onDelete={onDelete}
          />
        </div>
      );
    }
  });
}

export default Allusers;

import Navagation from "../components/Navagation";
import Allusers from "../components/Allusers";
import Footer from "../components/Footer";

function Home() {
  const deleteHandler = () => {
    console.log("something");
  };
  return (
    <section>
      <Navagation />
      <Allusers onDelete={deleteHandler} />
    </section>
  );
}

export default Home;

CodePudding user response：

You aren't actually calling the function with () => props.onDelete in User.js-- it needs to be () => props.onDelete() (note the parens added after props.onDelete).

<FontAwesomeIcon icon={faTimes} onClick={() => props.onDelete} />

...should be:

<FontAwesomeIcon icon={faTimes} onClick={() => props.onDelete()} />