title: Enable-Disable button with ReactJS
body: <p>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.</p>
  <p>Any guidance is super welcome!</p>
  <p>This is my app code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useState } from "react";
  
  function Input (props){
      const { onChange, value } = props
      return (&lt;input value={value} onChange={onChange} type="text" placeholder="Add a ToDo" maxLength="50"/&gt;)
  }
  
  function Button (props) {
      const {onChange, state, text} = props
      return (&lt;button disabled={false} onChange={onChange}&gt;{text}&lt;/button&gt;)
  }
  
  function App() {
    const [text, setText] = useState("");
    const [state, setSate] = useState(true);
  
    const handleChange = (event) =&gt; {
      if (!setText(event.target.value)) {
        setSate(false);
      } else {
        setSate(true);
      }
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;div className="container"&gt;
          &lt;Input value={text} onChange={handleChange} /&gt;
          &lt;Button onChange={() =&gt; handleChange(state)} text="Add" /&gt;
          &lt;Button onChange={() =&gt; handleChange(state)} text="Clean" /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>