DEV Community

loading...

Simple `useState()` in React

chrisdevcode profile image ChrisAchinga ・4 min read

Simple useState() in React

This is a hands-on code tutorial on creating react components and using hooks.

View the final product here

Little knowledge of react or just the basics will take you through the tutorial.

Clone my repo to go through the code snippets or simply start by creating a new react app using the create-react-app.

Creating A New React App:

# create a new react app
npx create-react-app usestate-react
# move into the new app's directory
cd usestate-react
# start the app to see of everything is okay
npm start
Enter fullscreen mode Exit fullscreen mode

Cloning My Repo

GitHub Repo Link

Cloning using git:

git clone git@github.com:ChrisAchinga/usestate-demo.git
Enter fullscreen mode Exit fullscreen mode

Cloning using gh:

gh repo clone ChrisAchinga/usestate-demo
Enter fullscreen mode Exit fullscreen mode

The Counter Component

In the src/components create a new file, Counter.js.
To see the component in action, we have to import it in the App.js file in src folder.

At the top of the file (src/App.js), add the import statement:

import Counter from './components/Counter'
Enter fullscreen mode Exit fullscreen mode

Now update the App() function to use the Counter component:

const App = () => {
  return (
    <>
      <main>
        <Counter />
      </main>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode
PS: I love using arrow functions and fragments in react
Enter fullscreen mode Exit fullscreen mode

Your final App.js file should look like the one below here:

import Counter from './components/Counter'
import './App.css'

const App = () => {
  return (
    <>
      <main>
        <Counter />
      </main>
    </>
  )
}

export default App
Enter fullscreen mode Exit fullscreen mode

Let's create our Counter component that will have a button, which when clicked, updates the initial number by 1.

Let's do this line by line: (get it, kind of a joke though)

First, we import useState() from react:

import { useState } from 'react'
Enter fullscreen mode Exit fullscreen mode

Since we will need to update the button every time it is clicked, we will need react hooks to do that.
The useState() is simply a react hook

Secondly, we create the component function that will display the button:

const Counter = () => {
  return (
    <>
      <button>0</button>
    </>
  )
}
Enter fullscreen mode Exit fullscreen mode

Don't forget to export the module at the bottom of the file:

export default Counter
Enter fullscreen mode Exit fullscreen mode

Run the app to see if everything is upto set.

There should be a big button with a small zero (LOL - No Styles intended), just like this:

image0.png

Third step: let's set up the hook in the Counter component:

A useState() hook syntax would be simply:

const [state, setstate] = useState(initialState)
Enter fullscreen mode Exit fullscreen mode

It's a simple destructuring syntax.

The state will be the initial value set by the parameter in the useState(), which in this case a Zero (0). The setstate will be a function that will be executed to update the state, after an event or a trigger.

So back to our file: src/components/Counter.js let's update with the useState() hook:

const [initial, updater] = useState(0)
Enter fullscreen mode Exit fullscreen mode

We set the initial to 0 (useState(0)) and then we have the function that will be executed when the button is clicked to update the initial value to the number of times it has been clicked, the updater in this case.

Your Counter.js file should be:

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  return (
    <>
      <button>0</button>
    </>
  )
}

export default Counter
Enter fullscreen mode Exit fullscreen mode

Fourth step is to create the updater fucntion, which is an easy one here:

While still in the Counter() function, just above the return keyword, add the following function:

const clickEvent = () => updater(initial + 1)
Enter fullscreen mode Exit fullscreen mode

This is same as :

function clickEvent() = {
    updater(initial + 1)
}
Enter fullscreen mode Exit fullscreen mode

So the clickEvent() function will use the updater that we declared in the hook. It simply take the initial value and adds one to it.

Stuck? Don't worry, this is how your file should be like up to now:

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  const clickEvent = () => updater(initial + 1)
  return (
    <>
      <button>0</button>
    </>
  )
}

export default Counter
Enter fullscreen mode Exit fullscreen mode

Now let's update our button to use the hook:

We'll make the button more dynamic by removing the hard coded 0 and make it more static. Here's how:

<>
  <button>{initial}</button>
</>
Enter fullscreen mode Exit fullscreen mode

We are replacing the 0 with a variable that will be updated every time we click the button.

Our final step will be adding the onClick function, which will be telling the button what to do when it is clicked.

What we want to happen is for the clickEvent() function to run every time we click the button.

So here's what we do:

<>
  <button onClick={clickEvent}>{initial}</button>
</>
Enter fullscreen mode Exit fullscreen mode

We are telling react to run the clickEvent() function every time we click on the button.

Our Counter component is now ready!

import { useState } from 'react'

const Counter = () => {
  const [initial, updater] = useState(0)
  const clickEvent = () => updater(initial + 1)
  return (
    <>
      <button onClick={clickEvent}>{initial}</button>
    </>
  )
}

export default Counter
Enter fullscreen mode Exit fullscreen mode

So in a summary:

We created a component, added a button that shows the number of times it's been clicked, using the useState hook. Cool isn't it?

NOTE:

I set my js environment linting with prettier not to use semi-colon

react-tools.png

Discussion (0)

Forem Open with the Forem app