How to pass an instance to a function within a component in reactjs

Question

If the terms used in question are incorrect please bare with me as this is the first time i'm using react js. I have written some code by referring lot of blogs, youtube, docs etc. and now i'm stuck since it is a mix of everything.

I have a requirement where i make a get call to an endpoint (about.js component) which returns json data which will be passed to (workspace.js component) where it is rendered and displayed. so far it is working fine.

next step, there is a link 'delete'(in cards element of workspace.js) on clicking, it should make a post call to an endpoint with the project_name. here i'm unable to make it work (confused with const, functions etc).

below is the code : (about.js)

import React, { useState, useEffect } from "react";
import Card from "react-bootstrap/Card";
import "./About.css";
import axios from "axios";
import Account from "./Workspace";
function About() {
  const [resp_data, setdata] = useState("");

  useEffect(() => {
    const axios = require("axios");
    axios({
      method: "get",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      url: "http://127.0.0.1:8000/api/projects/",
    })
      .then(function (response) {
        setdata(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {});
  }, []);

  if (resp_data != "") {
    return (
      <div>
        <Account user={resp_data} />
      </div>
    );
  } else {
    return <h2>Loading...</h2>;
  }
}

export default About;

workspace.js

import React, { Component } from "react";
import Card from "react-bootstrap/Card";

const Account = (props) => {
  function handleClick(event) {
    alert(event);
    //need to get the project_name here
    //make post call to an endpoint with project_name as data
  }
  const users = props.user.data;
  return (
    <div>
      {users.map((user) => (
        <div className="card-rows">
          <Card className="card" key={user.Id}>
            <Card.Body>
              <Card.Title>
                <b>Project : </b>
                {user.project_name}
              </Card.Title>
              <Card.Subtitle className="mb-2 text-muted">
                <b>DataSet : </b>
                {user.dataset_name}
              </Card.Subtitle>
              <Card.Subtitle className="mb-2 text-muted">
                <b>DataType : </b>
                {user.data_type}
              </Card.Subtitle>
              <Card.Link
                href="#"
                name="hello"
                className="delete"
                onClick={this.handleClick({user.project_name})} // call handleclick and the projectname should be available within the function
              >
                Delete
              </Card.Link>
              <Card.Link href="/launch" className="launch">
                Launch
              </Card.Link>
            </Card.Body>
          </Card>
        </div>
      ))}
    </div>
  );
};
export default Account;

it would be a great assistance if anyone could help

Answer 1

The problem in your implementation lies here

onClick={this.handleClick({user.project_name})}

because this would make the call while component gets rendered. But the react synthetic event handlers expect a function reference to be passed.

In order to achieve the same You can simply convert the onClick handler for Delete button

from

onClick={this.handleClick({user.project_name})}

to

onClick={() => this.handleClick(user.project_name)}

That would look like below

<Card.Link
  href="#"
  name="hello"
  className="delete"
  onClick={() => 
    this.handleClick(user.project_name)}>
   Delete
</Card.Link>

So, directly the handleClick method would receive the project_name.

const handleClick = project_name => {
    console.log(projectName);
    //You can use `project_name ` for making the API call.
  }

Answer 2

If you are in an functional component, you can get the user prop by adding curl braces. Also modify your onClick. React onClick Event Handling

I would recommend you to go through React Documentation thoroughly if starting out.

This should work for you.

const Account = ({user}) => { 
//use curly braces around props to fetch user prop

function handleClick(project_name) {
    alert(project_name);
    //need to get the project_name here
    //make post call to an endpoint with project_name as data
}


return(
... //above code
<Card.Link
    href="#"
    name="hello"
    className="delete"
    onClick={() => handleClick(user.project_name)}  
>
    Delete
</Card.Link>
... //below
)

Answer 3

I believe the issue is how you are handing the onClick function in the Card.Link component.

OnClick functions take a function to handle the event. So right now you are just invoking a function but that wouldnt have any effect on the event that is implicitly being passed into the component.

More can be found here: https://reactjs.org/docs/handling-events.html

     <Card.Link
      href="#"
      name="hello"
      className="delete"
      onClick={() => this.handleClick({user.project_name})} />