1. Initial Setup<\/h2>\n
We get started by running the below command. This creates the initial structure and configuration of our example application.<\/p>\n
>npx create-react-app my-app .\n<\/pre>\nOnce this command completes our application must be ready. The folder structure should resemble the below screen shot:<\/p>\n
\nApplication Structure<\/figcaption><\/figure>\n<\/div>\n 2. State in Class Component<\/h2>\n
Let us create our first component named ClickCounter in a file named the same. We use the ES6 class construct to build our component. This component renders a couple of buttons and a span. On click of one of the buttons a counter is updated and the count is displayed in the span. On click of the other button we reset the counter back to zero.
<\/div> <\/div><\/p>\nThe code for our component looks like below. We store the counter in state which is internal to the component. On click we update the state using the version of setState that takes a callback and passes it the previous state and props as parameters.<\/p>\n
ClickCounter.js<\/em><\/span><\/p>\n
import React from 'react';\n\nclass ClickCounter extends React.Component {\n constructor(props) {\n super(props);\n this.state = { count: 0 };\n }\n render() {\n return <>\n <span>Button clicked {this.state.count} times!\n <\/span>\n <button onClick={this.handleClick}>Click Me<\/button>\n <button onClick={this.resetCounter}>\n Reset Counter<\/button>\n <\/>;\n }\n resetCounter = () => {\n this.setState({ count: 0 });\n }\n handleClick = () => {\n this.setState((state, props) => \n ({ count: state.count + 1 }));\n }\n}\nexport default ClickCounter;\n<\/pre>\nAs you can see we have used the callback version of setState in the handleClick event handler. We use the value of the counter in the previous state to create a new state. This leads to an update of our component and it is re rendered. Similarly in the reset button’s click handler we use the version of setState to reset the counter back to zero. Next let us implement the same using function components and hooks.<\/p>\n
3. State in Function Components<\/h2>\n
Now let us implement the component we wrote above as function component. We create a separate file named ClickComponentFunc.js for this component. To enable using state with this component we additionally import the useState hook from react. We use it as follows to create a property count in state:<\/p>\n
const [count, setCount] = useState(0);\n<\/pre>\nAnd that’s how we can use state in a function component. The count variable can be used to access the state property and setCount can be used to set the value of the count property. The complete code for our function component looks like below<\/p>\n
ClickComponentFunc.js<\/em><\/span><\/p>\n
import React, { useState } from \"react\";\n\nexport default function ClickCounterFunc(props) {\n\n const [count, setCounter] = useState(0);\n const updateCounter = () => {\n setCounter(count + 1);\n };\n const resetCounter = () => {\n setCounter(0);\n };\n return <>\n <span>Button clicked {count} times!<\/span>\n <button onClick={updateCounter}>Click Me!<\/button>\n <button onClick={resetCounter}>Reset Counter<\/button>\n <\/>;\n\n}\n<\/pre>\nIn the next section we run our application and see the results.<\/p>\n
4. Running the Application<\/h2>\n
To run the application and see the results we run the following command at the root of our application<\/p>\n
>npm start\n<\/pre>\nThis command starts our application and opens it in the default browser at the url http:\/\/localhost:3000. The result looks like below<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/FolderStructureSetStateEx.jpg\")
![\"\"](\"http:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/10\/ProjectOutputsetStateEx-2.jpg\")