How to pass method to functional component in ReactJS

Question

I'm trying to pass method ref to functional component but somehow it doesn't work

Here is the function:

import { FaTrashAlt } from 'react-icons/fa';

const ArticlesData = props => {
    return(
        props.products.map(product => {
            return (   
                <tr>
                    <td>{product.name}</td>
                    <td>{product.description}</td>
                    <td>{product.price}$</td>
                    <td>
                        <span className="removeProduct--Container" onClick={props.click}>
                            <FaTrashAlt className="remove--Icon" />
                        </span>
                    </td>
                </tr>
            )
        }).reverse()
    )
}

export default ArticlesData;

Here is the request I'm trying to pass:

onRemove = (id) => {
    fetch(`http://localhost:5000/products/:${id}/delete`, {
        method: 'POST'
    })
}

And here is how I pass:

<ArticlesData products={this.state.products} click={this.onRemove}/>

Update:

controller:

router.post('/:id/delete', (req, res) => {
    try {
        console.log(req.params.id)
        productService.deleteOne(req.params.id)
        res.status(200)
    } catch (error) {
        console.log(error)
    }
})

service:

function deleteOne(id) {
    return Product.deleteOne({_id: id});
}

Yatin Gaikwad · Accepted Answer · 2021-04-11 13:29:22Z

1

You need to call the function with parameter id. I'm assuming your product object has id attribute:

import { FaTrashAlt } from 'react-icons/fa';

const ArticlesData = props => {
    return(
        props.products.map(product => {
            return (   
                <tr>
                    <td>{product.name}</td>
                    <td>{product.description}</td>
                    <td>{product.price}$</td>
                    <td>
                        <span className="removeProduct--Container" onClick={() => props.click(product.id)}>
                            <FaTrashAlt className="remove--Icon" />
                        </span>
                    </td>
                </tr>
            )
        }).reverse()
    )
}

export default ArticlesData;

answered Apr 11, 2021 at 13:29

Yatin Gaikwad

1,2102 gold badges14 silver badges25 bronze badges

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

1 Comment

user11119814 Over a year ago

I tried it but nothing happend. Is it possible to be something in the passing in click={...} ?

Rashed Rahat · Accepted Answer · 2021-04-11 13:53:55Z

0

Change ArticlesData component's code

from onClick={props.click}

to onClick={() => props.click(product.id)}

Full code:

import React from "react";
import ArticlesData from "./ArticlesData";

export default class SomeName extends React.Component {
  onRemove = (id) => {
    console.log(id);
    fetch(`http://localhost:5000/products/:${id}/delete`, {
        method: 'POST'
    })
  };

  render() {
    return (
      <>
        <ArticlesData click={this.onRemove} />
      </>
    );
  }
}

import { FaTrashAlt } from 'react-icons/fa';

const ArticlesData = props => {
    return(
        props.products.map(product => {
            return (   
                <tr>
                    <td>{product.name}</td>
                    <td>{product.description}</td>
                    <td>{product.price}$</td>
                    <td>
                        <span className="removeProduct--Container" onClick={() => props.click(product.id)}>
                            <FaTrashAlt className="remove--Icon" />
                        </span>
                    </td>
                </tr>
            )
        }).reverse()
    )
}

export default ArticlesData;

CodeSandbox Demo

edited Apr 11, 2021 at 13:53

answered Apr 11, 2021 at 13:32

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

4 Comments

user11119814 Over a year ago

I tried it but nothing happend. Is it possible to be something in the passing in click={...} ?

Rashed Rahat Over a year ago

It should work. Live demo link: codesandbox.io/s/sad-pine-lbq1q?file=/src/index.js

Rashed Rahat Over a year ago

Updated my answer. Please check working live codesandbox demo.

user11119814 Over a year ago

I'm using MERN Stack. I see that in router.post delete request when I log the id it is showing and in the browser console it says "Fetch finished loading: POST "localhost:5000/products/:606257f34a43ed20fc6546c4/delete". But it doesn't want to delete :D the product is still there :D

Collectives™ on Stack Overflow

How to pass method to functional component in ReactJS

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related