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

Shreyas Jadhav · Accepted Answer · 2021-04-05 15:19:15Z

1

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
)

answered Apr 5, 2021 at 15:19

Shreyas Jadhav

2,5714 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

LiquidDeath Over a year ago

How can i add event.preventDefault(); in my handleClick function?

Shreyas Jadhav Over a year ago

Unless it is something that's make a reload like a form or a <a> link you do not need to e.preventDefault(); If you want to do client side navigation use reactrouter.com/web/guides/quick-start

LiquidDeath Over a year ago

Thanks much Shreyas

Grant Herman · Accepted Answer · 2021-04-05 15:14:51Z

0

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})} />

answered Apr 5, 2021 at 15:14

Grant Herman

9833 gold badges14 silver badges29 bronze badges

1 Comment

LiquidDeath Over a year ago

Thanks for your time herman. I tried this, but it results in : Unexpected token, expected "," error. but Shreyas Jadhav's answer worked for me

Nithish · Accepted Answer · 2021-04-05 15:56:54Z

0

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.
  }

edited Apr 5, 2021 at 15:56

answered Apr 5, 2021 at 15:14

Nithish

6,1273 gold badges13 silver badges25 bronze badges

2 Comments

LiquidDeath Over a year ago

thanks Nithesh for the reply.But this solution results in TypeError: Cannot read property 'handleClick' of undefined. Shreyas Jadhav's answer worked for me

Nithish Over a year ago

There was a typo while copying the code from question. I have updated the answer. the change to be made was converting from function handleClick(event) { to const handleClick = project_name => {

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related