onClick React component

Question

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?

The same way you pass all the other properties.

tkausl
– tkausl

2021-01-06 22:08:11 +00:00
Commented Jan 6, 2021 at 22:08 — tkausl
– tkausl, Commented Jan 6, 2021 at 22:08

Yhunie-the-cat · Accepted Answer · 2021-01-06 23:04:36Z

1

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

answered Jan 6, 2021 at 23:04

Yhunie-the-cat

383 bronze badges

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

Collectives™ on Stack Overflow

onClick React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related