Search for a command to run...
How to create a stateful functional component in React?
No comments yet. Be the first to comment.
A quick analysis of the top 25 CWEs in the last 5 years show a repeating pattern
JavaScript is a scripting language, therefore you can write scripts to automate your workflow with JavaScript. The background of the snippet I created a node script recently to automate one workflow that I do repeatedly. Every time I create a new Jav...
In this article, you will learn to build a Markdown parser which compiles into HTML with JavaScript and Regular Expression Markdown is a markup language like HTML. It is quite popular among developers to write blogs, readme files, and documentation. ...
Handling error in express applications can be more challenging than building web applications and APIs Building web applications or APIs with express.js is not difficult in my opinion. I think it is more difficult to handle errors, error status codes...
This blog is a follow-up to my last blog in which I talked about promises. If you are unfamiliar with promises in JavaScript, please read that article before reading this one. Also, some familiarity with exception handling would be useful. Async Awai...
This article was originally published in https://bigomega.dev.
I tried react hooks and it's pretty awesome. With hooks, you can create functional components that can store state. It would not have been possible earlier. Hooks are a newer addition to the react library. They are included in the react 16.8 stable release.
In this blog, we will explore hooks briefly by creating a simple counter app. To get started open your terminal and type the following commands & open the project in the code editor of your choice.
$ npx create-react-app hooks-counter
$ cd hooks-counter
$ npm start
Open app.js in the /src folder, delete everything inside the <div className='App'></div> & the logo import.
The code should look like this at this point:
import React from 'react'
import './App.css'
function App() {
return (
<div className="App">
</div>
);
}
export default App
Let's also add bootstrap so that we don't have to bother about styling. Go to public/index.html and add the following link at the end of the head tag.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
Now let's create a Counter component. Inside the src directory, create a file named Counter.js and copy the following code inside it.
import React from 'react'
const Counter = () => {
const count = 0
return (
<div>
<h2>A simple counter application using Hooks.</h2>
<div className='btn-group'>
<button className='btn btn-lg btn-outline-danger'>-</button>
<button className='btn btn-lg btn-outline-danger'>{count}</button>
<button className='btn btn-lg btn-outline-danger'>+ </button>
</div>
</div>
)
}
export default Counter
We are setting the count as 0 by hard coding the value. Now we will explore how to make it a state and act according.
Now let's import the Counter component in the app.js file and use it in the app component.
import React from 'react'
import './App.css'
import Counter from './Counter' // highlight-line
function App() {
return (
<div className="App">
// highlight-next-line
<Counter />
</div>
);
}
export default App
In order to use the useState hook, we have to import it from react. To do that we can simply add the import in the first line of the Counter.js file.
import React, { useState } from 'react' // highlight-line
const Counter = () => {
const count = 0
return (
<div>
<h2>A simple counter application using Hooks.</h2>
<div className='btn-group'>
<button className='btn btn-lg btn-outline-danger'>-</button>
<button className='btn btn-lg btn-outline-danger'>{count}</button>
<button className='btn btn-lg btn-outline-danger'>+ </button>
</div>
</div>
)
}
export default Counter
Now, let's use the useState to set the count value to 0.
import React, { useState } from 'react'
const Counter = () => {
// highlight-next-line
const [count, setCount] = useState(0)
return (
<div>
<h2>A simple counter application using Hooks.</h2>
<div className='btn-group'>
<button className='btn btn-lg btn-outline-danger'>-</button>
<button className='btn btn-lg btn-outline-danger'>{count}</button>
<button className='btn btn-lg btn-outline-danger'>+ </button>
</div>
</div>
)
}
export default Counter
Have a look at the following line.
const [count, setCount] = useState(0)
This is where we are using the first hook, useState. In the code, the count is the application state and you can think of the setCount as a function that can change the count state, just like this.setState() could change the values of the state object. The argument to useState() initializes the count with whatever it is passed with. In this case, it's 0.
In order to change the value of the count object, we now have to add event handlers to the + and - buttons. Let's attach increment and decrement functions to with the ability to change the count object.
import React, { useState } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
// highlight-start
const increment = () => {
setCount(count + 1)
}
const decrement = () => {
setCount(count - 1)
}
// highlight-end
return (
<div>
<h2>A simple counter application using Hooks.</h2>
<div className='btn-group'>
// highlight-next-line
<button className='btn btn-lg btn-outline-danger' onClick={decrement}>-</button>
<button className='btn btn-lg btn-outline-danger'>{count}</button>
// highlight-next-line
<button className='btn btn-lg btn-outline-danger' onClick={increment}>+</button>
</div>
</div>
)
}
export default Counter
And with that, our counter application is completed. Your output should look like this now
Thank you for reading the blog. The source code for the example can be found at this link and if you want to learn more about react hooks, you could try exploring the official documentation here. Text