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

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;

Conclusion

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

Live Preview
Source Code