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