How can we write a click handler for a Stateless Function Component in React JS

Question

In my react application, I have created a stateless Function Component which has a button in the JSX. I want to write a click handler for that button but defining the click handler outside the function throws me error. I am learning react and I have seen many tutorials that mentions we should try to create more stateless component hence I am following this approach.

Here is how I am doing- My component-

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';

handleClick = () =>{
    alert("Button clicked");
 }


const AccordionComp = (props) => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h4>List</h4>
            </AccordionItemTitle>
            <AccordionItemBody>
                <table className="accordionTable">
                    <thead className="row">
                        <th className="col-sm-2">City Name</th>
                        <th className="col-sm-2">Name</th>
                    </thead>
                    <tbody>
                        <tr className="row">
                            <td className="col-sm-2">{props.propFromParent.city}</td>
                            <td className="col-sm-2">{props.propFromParent.name}</td>
                            <td className="col-sm-2"><button onClick={handleClick}>Click Me</button></td>
                        </tr>   
                    </tbody>
                </table>

            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

export default  AccordionComp

the handleClick should be in the parent component and passed as props — Alfred Ayi-bonte
– Alfred Ayi-bonte, Commented Oct 12, 2018 at 9:18
I think his problematic is not to pass a parent function but to have a click handler within a stateless component which is fully doable, cf answer. — Ivo
– Ivo, Commented Oct 12, 2018 at 9:19

Ivo · Accepted Answer · 2018-10-12 09:18:20Z

You can define the function within your component and then declare your return part:

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';



const AccordionComp = (props) => {

const handleClick = () => {
    alert("Button clicked");
 }

return (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h4>List</h4>
            </AccordionItemTitle>
            <AccordionItemBody>
                <table className="accordionTable">
                    <thead className="row">
                        <th className="col-sm-2">City Name</th>
                        <th className="col-sm-2">Name</th>
                    </thead>
                    <tbody>
                        <tr className="row">
                            <td className="col-sm-2">{props.propFromParent.city}</td>
                            <td className="col-sm-2">{props.propFromParent.name}</td>
                            <td className="col-sm-2"><button onClick={handleClick}>Click Me</button></td>
                        </tr>   
                    </tbody>
                </table>

            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
    )
};

export default  AccordionComp

See also this post for interesting infos : Functions in stateless components?

Shubham Khatri · Accepted Answer · 2018-10-12 09:19:19Z

2

You handler outside the functional component doesn't havve the right syntax, It should be a function or declared as a const

const handleClick = () =>{
    alert("Button clicked");
 }

or

function handleClick () {
    alert("Button clicked");
 }

However ideally in such a scenario, either the handler comes as props from the parent which takes some action when it is triggered or you define your functional Component as Class Component if the action to be taken need not be handled by parent

answered Oct 12, 2018 at 9:19

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

How can we write a click handler for a Stateless Function Component in React JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related