CODEWITHSUNDEEP
reactjs
user12783961
user12783961

Reputation:

Using type='submit' for custom button component?

I have a CustomButton component I want to be able to reuse throughout my app. If I want to use it as a submit button for a contact form, am I able to just use it like this, <CustomButton type='submit'>Submit</CustomButton> or do I have to pass in the type as props somehow? that way if I use the button for something else like linking to a github repo I can change it.

This is my CustomButton component as of now.

import React from 'react'
import { css } from '@emotion/core'

import { COLORS } from '../constants'

const CustomButton = ({ children }) => {
  return (
    <button
      css={css`
        color: ${COLORS.primaryTextColor};
        font-size: 1rem;
        width: 125px;
        height: 50px;
        background: none;
        border: 2px solid ${COLORS.secondaryTextColor};
        border-radius: 5px;
        cursor: pointer;
      `}
    >
      {children}
    </button>
  )
}

export default CustomButton

Upvotes: 1

Views: 829

Answers (1)

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

I would probably do something like this. This wat your button will always be of type 'button' by default. Unless you want to change it for a specific component. Then you'd something like <CustomButton type="submit" />

const CustomButton = ({ children, type = "button" }) => {
  return (
    <button
      type={type}
      css={css`
        color: ${COLORS.primaryTextColor};
        font-size: 1rem;
        width: 125px;
        height: 50px;
        background: none;
        border: 2px solid ${COLORS.secondaryTextColor};
        border-radius: 5px;
        cursor: pointer;
      `}
    >
      {children}
    </button>
  )
}

Upvotes: 1

Related Questions