How to add disabled attribute to button in react?

Question

Here is my code

import React from 'react'
import PropTypes from "prop-types";

export default function Button({ htmlType, type, disabled, action, ...props}) {
  return (
    <button type={htmlType} onClick={action}>
        {props.children}
    </button>
  )
}

Button.propTypes = {
    htmlType: PropTypes.string.isRequired,
    action: PropTypes.func,
    disabled: PropTypes.bool
};

I call Button component by this code

 <Button disabled={true}>button title</Button>

I want to add disabled html attribute to button when disabled of props is true, how to do it ?

You actually need to add the disabled attribute to the real button: return <button type={htmlType} onClick={action} disabled={disabled}>{props.children}</button>. — Riadh Adrani
– Riadh Adrani, Commented Feb 7, 2023 at 9:44
simply pass disabled to button. like this : <button disabled={Boolean(disabled)} ... — Ali Sattarzadeh
– Ali Sattarzadeh, Commented Feb 7, 2023 at 9:45
The problem with your code is that Button (uppercase B) is a component which renders a button JSX tag. Simply passing disabled={true} to the component will not cause the button to be disabled, you need to set the disabled attribute of the button JSX tag itself to alter its attribute. — Dimitar
– Dimitar, Commented Feb 7, 2023 at 9:51

marc_s · Accepted Answer · 2024-11-08 19:50:14Z

3

You could line single line if-else statements like this:

<button disabled={propsDisabled}>button title</button>

Here, propsDisabled is the variable which you can pass through the props, and it is a boolean variable which will either be true or false. I have not used disabled itself to avoid confusion but you can use the variable name as disabled.

When propsDisabled is true, the button will be disabled, and when propsDisabled is false the button will not be disabled.

edited Nov 8, 2024 at 19:50

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Feb 7, 2023 at 9:42

Ayush

7201 gold badge9 silver badges23 bronze badges

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

2 Comments

Dimitar Over a year ago

AFAIK disabled={propsDisabled} will work just fine as well.

Ayush Over a year ago

@Dimitar Yes, that will also work, I'll include that in edit, thanks :)

Islam Y- · Accepted Answer · 2023-02-07 10:52:48Z

2

Aya, I couldn't exactly understand your question, it looks like you're trying to solve a problem, when you have a second problem in the question in the first place.

Are you using Ant components? use the disabled prop on the <Button /> component itself. (notice the capital B in the component name Button).

<Button disabled={true} />
// or (it's the same but different JSX syntax)
<Button disabled />

This is the same answer answered by the brother @Abdul Qadir.

If you're working with native HTML elements, also, you can call the disabled attribute on the <button /> element (notice the small character b in the element name button) the same way and it should work:

<button disabled={true}>I'm disabled</button>
// or (the same but different syntax)
<button disabled>I'm disabled</button>

So here are the two answers,

If you're working with Ant components:

import { Button } from 'antd';

const CustomButton = ({ disabled, children }) =>{
  return <Button disabled={disabled}>{children}</Button>
}

If you're working with native HTML elements:

const CustomButton = ({ disabled, children }) =>{
  return <button disabled={disabled}>{children}</button>
}

answered Feb 7, 2023 at 10:52

Islam Y-

4,06011 gold badges42 silver badges88 bronze badges

1 Comment

Aya Abdessalem Over a year ago

this is what i was looking for! <Button disabled={true} /> // or (it's the same but different JSX syntax) <Button disabled /> thank you

Collectives™ on Stack Overflow

How to add disabled attribute to button in react?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related