DEV Community

Cover image for Week 4 - Handle Input App
Mohamed Khaled Yousef
Mohamed Khaled Yousef

Posted on

Week 4 - Handle Input App

Welcome to Week 4 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 .

Handle Input App

handle input app
This week we created a Handle Input app that handled the data of the input when it changes value in react.

To create a HandleInput 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.
  • Now, We handled the data when it changes value


import React, {useState} from 'react';

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

    return (
            <h2>Handle Input</h2>
                placeholder="Enter Your Title"
                onChange={(e) => setValue(}

export default HandleInput;

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)