DEV Community

Cover image for Week 5 - Disable Button App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on


Week 5 - Disable Button App

Welcome to Week 5 of React Curve

Hello developer!, glad to see you again.

This is a react-curve, open source project where I can share and start creating small UI components in the way I understood the concepts to build large scale projects .

Disable Button App

Disable Button app
This week we created a Disable Button app. When the data changes, we handle it and disable the button in react.

To create a DisableButton component; We have to :

  • Input data is usually handled by the component. So all the data is stored in the component state.
  • Create a state that holds the value of the input with inital value an empty string.
  • The value of the input is the value of the state.
  • Adding event handlers in the onChange attribute to control input changes and update our state.
  • The submit button is disabled if the length of value in the input is empty.
  • Now, When the data changes, we handle it and disable the button.


import React, {useState} from 'react';

const DisableButton = () => {
    const [value, setValue] = useState("");

    return (
            <h2>Handle Input</h2>
                placeholder="Enter Your Title"
                onChange={(e) => setValue(}
            <button disabled={value.length < 1}>

export default DisableButton;

Enter fullscreen mode Exit fullscreen mode


Thank you for reading and any contribution is more than welcome in the threads below!

Live Preview
Source Code

Top comments (0)