Defining Components in React-CodePudding

I am creating a react website in which many pages have a specific button that should look the same for all. Should this button be its own component? If so, how would I specify the onClick events to be different for each button if it is a component?

CodePudding user response：

Yes, it should be its own component.

Create it in a separate file so you can import them where you need to use.

The component should receive a onClick prop that you pass to the internal button tag.

See this example: https://reactjs.org/docs/components-and-props.html#composing-components

CodePudding user response：

export const Button = ({ label, onClick, disabled }) => {
    return (
        <button
           onClick={onClick}
           disabled={disabled}
        >
           {label}
        </button>   
    )
}

and then you can export this component inside any of the components you want, and pass in values like onClick and label to make it more dynamic

export const DemoFunction () => {
    const onClickHandler = () => {}

    return (
        <Button label="Click" onClick={onClickHandler} />
    )
}