https://github.com/ebazhanov/click-counter

React click counter example
https://github.com/ebazhanov/click-counter

clickcounter javascript material-ui netlify react

Last synced: about 1 month ago
JSON representation

React click counter example

• Host: GitHub
• URL: https://github.com/ebazhanov/click-counter
• Owner: Ebazhanov
• Created: 2020-04-16T14:13:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-18T16:49:33.000Z (over 2 years ago)
• Last Synced: 2024-10-14T22:44:03.742Z (3 months ago)
• Topics: clickcounter, javascript, material-ui, netlify, react
• Language: HTML
• Homepage: https://click-to-count.netlify.app
• Size: 561 KB
• Stars: 3
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## My example of `click counter` with using the State Hook

> I styled my version with material-ui, you can try to reach 2 clicks and see the bonus ))  

##### You might want to see from where it was all started, what is the simple implementation

```js

function App() {

    const [count, setCount] = useState(0);

    return (

        <>

            
{count}

             setCount(count + 1)}

            >

                Count me!

        >

    );

}


ReactDOM.render(

    ,

    document.getElementById('root')

);

export default App;

```

##### How to run on `http://localhost:3000`:

- `$ yarn start`, make sure you installed `node_modules`

- or just see it on netlify: [https://click-to-count.netlify.app](https://click-to-count.netlify.app)

> We now have a counter that increases every time there’s a click on a Button.

This is a simple example to illustrate state. I don’t recommend you use it as a counter in a real application. Instead, you’d probably want to create this.state.history variable that stores exactly which button was clicked at which point as an array of the current state at different points in time.

Then, if you need a click count, you can access it with this.state.history.length, and that click count will be correct even if you undo past changes.

#### Reference link

- [https://reactjs.org/docs/hooks-state.html](https://reactjs.org/docs/hooks-state.html)