First Time with React Hooks
Tags: beginners, javascript, react
Published: 2019-10-28 01:16:23

---
title: First Time with React Hooks
published: true
description: I spent an afternoon changing a class component to a functional component that uses a React Hook. Here are the changes.
tags: #beginners, #javascript, #react
---

I keep hearing about how React Hooks is the direction where Facebook wants the React library to go. So, I wanted to take an existing project of mine and convert a Class component to a Functional component that uses the `useState` React Hook. Let's take a look at the Class component.

####The Class Component Version
```javascript 
import React, { Component } from 'react'

export class RecipesInput extends Component {

   state = {
      recipe: ""
   }

   handleChange = event => {
      this.setState({ [event.target.name]: event.target.value })
   }

   handleSubmit = event => {
      event.preventDefault()
      this.props.fetchRecipes(this.state)
   }
   

   render() {
      return (
         <div>
            <h2>Recipes Search Bar</h2>
            <form onSubmit={this.handleSubmit}>
               <input name="recipe" type="text" value={this.state.recipe} onChange={this.handleChange}/>
               <input type="submit" value="Search!"/>
            </form>
         </div>
      )
   }
}

export default RecipesInput
```

Standard stuff. It's a form that takes a user's input, store the changes in the local state, then submit the state upon `onSubmit`. Let's change it up.

```javascript 
//class
import React, { Component } from 'react'
export class RecipesInput extends Component {

   state = {
      recipe: ""
   }
...

//functional
import React, { useState } from "react"
export default function RecipesInput(props) {
	const [recipe, setRecipe] = useState("")

...
```

I don't import `{Component}`. Removed the local state. I import `{useState}`, a React Hook. Then call this hook according to the official doc. I have a dispatch action being passed down to this component from the parent container component. We'll comeback to this.

The biggest change is obviously the hook. On the left side, you declare the name of the state, then the name of the method to modify it. On the right side, you call the Hook you want to use, then feed it the initialState(An empty string in this case).


```javascript 
//class

   handleChange = event => {
      this.setState({ [event.target.name]: event.target.value })
   }

   render() {
      return (
         <div>
            <h2>Recipes Search Bar</h2>
            <form onSubmit={this.handleSubmit}>
               <input name="recipe" type="text" value={this.state.recipe} onChange={this.handleChange}/>
               <input type="submit" value="Search!"/>
            </form>
         </div>
      )
   }



//functional
	return (
		<div>
			<h2>Recipes Search Bar</h2>
			<form onSubmit={handleSubmit}>
				<input
					name="recipe"
					type="text"
					value={recipe}
					onChange={event => {
						setRecipe(event.target.value)
					}}
				/>
				<input type="submit" value="Search!" />
			</form>
		</div>
	)
```

`render()` turns into `return()`. There's no longer any mention of `this`. The biggest change here is the `onChange` for the text input.

Instead of using `handleChange` and `this.setState` to update the local state upon the input's change, we can just call the hook we set up with `setRecipe`. Then, we feed it the updated value, which we're grabbing from the input bar itself. 

The last part is to modify the `handleSubmit`. All we have to do is remove `this`.
```javascript
const handleSubmit = event => {
   event.preventDefault()
   props.fetchRecipes(recipe)
}
```

####Final Product
```javascript
import React, { useState } from "react"

export default function RecipesInput(props) {
	const [recipe, setRecipe] = useState("")

	const handleSubmit = event => {
		event.preventDefault()
		props.fetchRecipes(recipe)
	}

	return (
		<div>
			<h2>Recipes Search Bar</h2>
			<form onSubmit={handleSubmit}>
				<input
					name="recipe"
					type="text"
					value={recipe}
					onChange={event => {
						setRecipe(event.target.value)
					}}
				/>
				<input type="submit" value="Search!" />
			</form>
		</div>
	)
}
```

[React Hook Test Link](https://imgur.com/OU9v6MD)