DEV Community

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

Posted on

4 2

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

Code

import React, {useState} from 'react';

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

    return (
        <div>
            <h2>Handle Input</h2>
            <input
                type="text"
                placeholder="Enter Your Title"
                value={value}
                onChange={(e) => setValue(e.target.value)}
            />
            <p>{value}</p>
        </div>
    );
}

export default HandleInput;

Enter fullscreen mode Exit fullscreen mode

Conclusion

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

Live Preview
Source Code

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay