CODEWITHSUNDEEP
javascriptreactjsreact-hookstogglebuttonuse-state
elisa
elisa

Reputation: 229

Enable-Disable button with ReactJS

I am trying to enable or disable a button based on whether or not there is text in my input but cant seem to achieve it. When I manually set {true OR false} in the disabled property of Button function it works fine but I am really confused on how to set that dynamically based on the content of the input.

Any guidance is super welcome!

This is my app code

import { useState } from "react";

function Input (props){
    const { onChange, value } = props
    return (<input value={value} onChange={onChange} type="text" placeholder="Add a ToDo" maxLength="50"/>)
}

function Button (props) {
    const {onChange, state, text} = props
    return (<button disabled={false} onChange={onChange}>{text}</button>)
}

function App() {
  const [text, setText] = useState("");
  const [state, setSate] = useState(true);

  const handleChange = (event) => {
    if (!setText(event.target.value)) {
      setSate(false);
    } else {
      setSate(true);
    }
  };

  return (
    <div className="App">
      <div className="container">
        <Input value={text} onChange={handleChange} />
        <Button onChange={() => handleChange(state)} text="Add" />
        <Button onChange={() => handleChange(state)} text="Clean" />
    </div>
  );
}

export default App;

Upvotes: 6

Views: 25149

Answers (2)

Ignacio Elias
Ignacio Elias

Reputation: 578

So you should pass the state value you are using to store whatever the users write in the input to the button so that the button knows when the input has text on it or not. And then your second state value can be used to store your todo list, so something like this

import { useState } from "react";

function Input({ handleChange, value }) {
  return (
    <input
      value={value}
      onChange={handleChange}
      type="text"
      placeholder="Add a Todo"
      maxLength="50"
    />
  );
}

function Button({ handleClick, text, disabled }) {
  return (
    <button disabled={disabled} onClick={handleClick}>
      {text}
    </button>
  );
}

function App() {
  const [value, setValue] = useState("");
  const [todoList, setTodoList] = useState([]);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleAdd = () => {
    setTodoList([...todoList, value]);
    handleClear();
  };

  const handleClear = () => {
    setValue("");
  };

  return (
    <div className="App">
      <div className="container">
        <Input value={value} handleChange={handleChange} />
        <Button handleClick={handleAdd} disabled={!value} text="Add" />
        <Button handleClick={handleClear} disabled={!value} text="Clear" />
      </div>
    </div>
  );
}

export default App;

Upvotes: 2

codemonkey
codemonkey

Reputation: 7905

Button element should change to:

function Button (props) {
    const {disabled, onChange, state, text} = props
    return (<button disabled={disabled} onChange={onChange}>{text}</button>)
}

Rendering of it should change to:

...
<Button disabled={!text} onChange={() => handleBtn()} text="Add" />
...

Sandbox: https://codesandbox.io/s/zen-hawking-qqzkw?file=/src/App.js

The idea is to send down disabled prop which would be true if the there is no text in the field.

ALSO, handleChange should look like this:

  const handleChange = (event) => {
    setText(event.target.value);
  };

because the rest of your code in that function does not do anything.

Buttons should have their own handler functions .e.g. const handleBtn = () => {};

Upvotes: 5

Related Questions