CODEWITHSUNDEEP
reactjsonclickreact-hooks
Denver Dang
Denver Dang

Reputation: 2615

onClick React component

Basically I have created a button component that looks something like this:

import React from "react";
import styles from "./button.module.scss";

const Button = ({ icon, text, align, bgcolor }) => {
    const btnStyle = {
        justifySelf: align,
    };

    return (
        <>
            <div className={"btn " + bgcolor} style={btnStyle}>
                <i className={icon}></i> {text}
            </div>
        </>
    );
};

export default Button;

In my app I can then call it by:

<Button
    icon="fa-light fa-trash"
    text="Some text"
    align="end"
    bgcolor="yellow"
></Button>

However, at the same time I wish to have an onclick event similar to:

<div onClick={() => setState(!state)}>Click me</div>

How can that be achieved?

Upvotes: 0

Views: 44

Answers (1)

Yhunie-the-cat
Yhunie-the-cat

Reputation: 38

Write a function that you can pass as props to the Button component:

const function=()=>{
setState(!state)
}

<Button
    icon="fa-light fa-trash"
    text="Some text"
    align="end"
    bgcolor="yellow"
    function={function}
></Button>

And use it inside like this:

const Button = ({ icon, text, align, bgcolor, function }) => {
    const btnStyle = {
        justifySelf: align,
    };

    return (
        <>
            <div onClick={function} className={"btn " + bgcolor} style={btnStyle}>
                <i className={icon}></i> {text}
            </div>
        </>
    );
};

Upvotes: 1

Related Questions