React button component with switch statement

Question

Hi all trying to make a button component that converts to an anchor tag when changing a prop. Im using a switch statement but nothing changes when I change the prop and the onClick is not being handled? Im using NextJS's Link component for the anchor tag

const Button = ({ children }, props) => {
    switch (props.as) {
        case 'link':
            return (
                <Link
                    href={props.link}
                    onClick={props.click}
                    className={styles.hello}>
                    {props.icon && <FontAwesomeIcon icon={props.icon} />}
                    {children}
                </Link>
            );
        case 'button':
            return (
                <button
                    onClick={props.click}
                    type='button'
                    className={styles.btn}>
                    {props.icon && <FontAwesomeIcon icon={props.icon} />}
                    {children}
                </button>
            );
        default:
            return (
                <button
                    onClick={props.click}
                    type='button'
                    className={styles.btn}>
                    {props.icon && <FontAwesomeIcon icon={props.icon} />}
                    {children}
                </button>
            );
    }
};

in my Parent component I'm importing the Button and using it like:

    <Button
                            as='link'
                            icon='coffee'
                            click={props.handleAccept}>
                            RSVP
                        </Button>

In render it appears a button rather than expected anchor tag. Any ideas please?

Have you done a console.log(props.as) inside the Button component to verify that the prop's value is what you expect? — Matt U
– Matt U, Commented Oct 25, 2021 at 16:21

McRist · Accepted Answer · 2021-10-25 16:22:43Z

1

const Button = ({ children, ...props }) => {

It should be like this, props is not second parameter

answered Oct 25, 2021 at 16:22

McRist

1,77811 silver badges16 bronze badges

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

1 Comment

James Over a year ago

Thanks, that was it.

CountSigFigs · Accepted Answer · 2021-10-25 16:34:15Z

0

When declaring the Button component, try moving the props inside the destructed object like this and ... in front of it.

const Button = ({ children, ...props }) => {.......};

answered Oct 25, 2021 at 16:34

CountSigFigs

131 silver badge2 bronze badges

1 Comment

James Over a year ago

Thank you you are correct, I think @MCcRist came to the same conclusion I appreciate the input.

Collectives™ on Stack Overflow

React button component with switch statement

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related