Sometimes when working on a project you don’t really know what components will be stateful or stateless. This is something you might consider before hand so you can make a component either classed based or functional . Since state can only exist inside of class based components, you will have to refactor your functional component to be a class based component if you’ve come to the conclusion that it needs state. This can take valuable time away from you and sometimes a hassle to refactor. React hooks can help you make clean code and easily manage state inside of a functional component! In this blog I will show you how you can use the React hook useState to your advantage. Make sure you’re using react version 16.8 or higher to utilize hooks.
How To Use Hooks
import React, { useState } from 'react'
function ToDoListForm() {
return (
<div>
<h1>My Todo List!</h1>
<input/>
<button>Add</button>
</div>
);
}
export default ToDoListForm;
//ToDoListForm.Js
First, import the hook that you want to use in your functional component.
There are multiple hooks react provides like useEffect, useContext and useReducer. You can read more about them here.
import React, { useState } from 'react'
function ToDoListForm() {
const [ inputTask, setInputTask ] = useState('')
const submitHandler = () => {
}
return (
<div>
<h1>My Todo List!</h1>
<input/>
<button>Add</button>
</div>
);
}
export default ToDoListForm;
//ToDoListForm.Js
Second, useState returns an array of two elements. The first element will be your current state. The second element will be
a function which will set your state. It would be best to use array destructuring for readability. I am also initializing my state to be an empty string. A key difference with state and a hook as opposed from class based state is you can initialize your state with anything you want. A string, array, boolean, or object. Where in class based, the state is always an object.In this case i'm initializing with an empty string since thats what I receive back from the onChange event.
import React, { useState } from 'react'
function ToDoListForm() {
const [ inputTask, setInputTask ] = useState('')
const submitHandler = () => {
}
return (
<div>
<h1>My Todo List!</h1>
<input
type="text"
value={inputTask}
onChange={ event => {
setInputTask(event.target.value)
}
}
/>
<button >Add</button>
</div>
);
}
export default ToDoListForm;
//ToDoListForm.js
Third, set the state every time the user types. You can use an onChange event for this. onChange will retrieve values from whatever is typed in the input. We can get this value through event.target.value. Remember how useState returns a second element which is a function that will update the state? Well here we can simply invoke it passing through event.target.value.
import React, { useState } from 'react'
function ToDoListForm(props) {
const [ inputTask, setInputTask ] = useState('')
const submitHandler = () => {
props.addUserTask({task: inputTask});
}
return (
<div>
<h1>My Todo List!</h1>
<input
type="text"
value={inputTask}
onChange={ event => {
setInputTask(event.target.value)
}
}
/>
<button onClick={submitHandler}>Add</button>
</div>
);
}
export default ToDoListForm
Finally, we will use the prop (props.addUserTask) passed down from the parent component that will retrieve the input values to an array of task once the user clicks the button. All we need to do is pass in the first element useState returns ,which is the current state, to props.addUserTask. I pass in an object because thats the way i'm carrying my data to the sibling component in the parent component. There I will take the value out and render it to the screen. I hope you now have a good understanding how hooks work! Thanks for reading and happy coding.
Top comments (0)