How to disable button using props in React.js?

Question

I am new to React.js. I am trying to disable button using props value. This is how I am trying to do but its not working throwing an error Parsing error: Unexpected token, expected "...". Is it the correct way to do this? Please help me. Thanks

import React from "react";

function Note(props) {

  function handleClickUpdateA() {
    props.onUpdateA(props.id);
  }

  var dis;

  if(props.des === '1')
  {
    dis = 'disabled';
  } else
  {
    dis = ' ';
  }

  return (

    <div>
      <p>{props.content}</p>
      <button {dis} onClick={handleClickUpdateA}>Accept</button>
    </div>
  );
}

export default Note;

Alireza HI · Accepted Answer · 2020-04-26 20:17:01Z

1

button element gets a disabled prop. You can set it true for disabling it. And false to able it. So you just need to change your jsx like below.

JSX Part:

<button disabled={dis === 'disabled'} onClick={handleClickUpdateA}>Accept</button>

But I recommed to use a isDisabled variable and set that to true or false instead of dis with string value. It is a best practice I think.

So your code would become like this:

JS Part:

var isDisabled = props.des === '1' ? true : false;

JSX Part:

<button disabled={isDisabled} onClick={handleClickUpdateA}>Accept</button>

It is more readable now.

edited Apr 26, 2020 at 20:17

answered Apr 26, 2020 at 20:11

Alireza HI

1,9331 gold badge14 silver badges20 bronze badges

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

Comments

CanUver · Accepted Answer · 2020-04-26 20:12:16Z

0

you can use this to check whether the button is active or not.

 import React from "react";

    function Note(props) {

      function handleClickUpdateA() {
        props.onUpdateA(props.id);
      }

      var dis;

      if(props.des === '1')
      {
        dis = 'disabled';
      } else
      {
        dis = ' ';
      }

      return (

        <div>
          <p>{props.content}</p>
          <button 
          disabled = { props.des === 1 ? true : false  //Your props coming here. and you can return true or false based on the value that comes with props. in this case you will not need to install the if else structure above}
         />
        </div>
      );
    }

    export default Note;

answered Apr 26, 2020 at 20:12

CanUver

1,7842 gold badges10 silver badges19 bronze badges

Comments

shabeeb ck · Accepted Answer · 2020-04-26 20:14:49Z

0

import React from "react";
function Note(props) {
  function handleClickUpdateA() {
    props.onUpdateA(props.id);
  }
  var dis;

  if(props.des === '1')
  {
    dis = true';
  } else
  {
    dis = false;
  }

  return (

    <div>
      <p>{props.content}</p>
      <button disabled={dis} onClick={handleClickUpdateA}>Accept</button>
    </div>
  );
}

export default Note;

answered Apr 26, 2020 at 20:14

shabeeb ck

1311 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to disable button using props in React.js?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related