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!
Top comments (0)