Dynamic disabled input

Question

I want to make an input field disabled on the basis of prop variable.

I am doing like this:

<input {isDisabled ? 'disabled' : ''}>

But this is not working. Then how can I do that?

Answer 1

<input disabled={isDisabled ? true : false}>

You have to use like this It's working.

Answer 2

You need to use the disabled prop:

<input disabled={isDisabled}/>

// Same but less readable
<input disabled={isDisabled ? true : false}/>
<input {...{disabled: isDisabled}}/>

For example:

const App = () => {
  const [isDisabled, toggle] = useReducer(p => !p, false);
  return (
    <>
      <input disabled={isDisabled} />
      <button onClick={toggle}>Toggle</button>
    </>
  );
};