How to disable a button when an input is empty?

Question

I\'m new to React. I\'m trying to disable a button when an input field is empty. What is the best approach in React for this?

I\'m doing something like the following:

Answer 1

You'll need to keep the current value of the input in state (or pass changes in its value up to a parent via a callback function, or sideways, or such that it eventually gets passed back into your component as a prop) so you can derive the disabled prop for the button.

Example using state: