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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay