Learning React: Class Components and State
Tags: react, tutorial, beginners, webdev
Published: 2023-02-24 16:58:27

As a quick refresher classes are basically templates that we can use to quickly set up our code or program, class components work the same way since we can make render templates to use at any time, they also have a few extra additions like state and props, which we'll go over! 
<br>
#Creating Class Components
To make class components first you have to type the keyword `class` followed by the name of the class starting in caps. Then you say that it's a react component by typing `extends React.Component`. Our render code (or HTML markup) will be in the `render()` method, and in that method there should be a return statement where you type your render code.

```react
class App extends React.Component {
  render () {
    return (
  <h1>Hello Human!</h1>
    )
  }
  }

var root = ReactDOM.createRoot(document.getElementById('app'));

root.render(<App />)
//It renders a heading that says "Hello Human!"
```
{% stackblitz https://stackblitz.com/edit/js-glxp7x?embed=1&file=index.js %}
<hr>
#Using Props
Accessing and using props is different with Class components than with functional components. To access props you make it a parameter in the constructor, then in it you call `super()` with props as its parameter as well. 

```react
class App exetends React.Component {
constructor(props) {
super(props);
   }
}
```
Unlike function components, when making a prop you have to have `this` and `prop` to the code since your making a class property. Other than that you render props the same way as function components using JSX markup and attributes. 

```react
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h1>Hello! my name is {this.props.name}</h1>;
  }
}

var root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App name="Lens" />);

```
{% stackblitz https://stackblitz.com/edit/js-qjc83g?file=index.js %}
<hr> 
#State
States are information that can change over time. A change in a component's state tells the browser to re-render that component but with updated values. To make states you have to create a `this.state` in the constructor, `this.state` is an object that lets you track and use multiple values by the way. In the state object you put the name of the state and its value, for example, we can make a state named count that has a value of 0 with `count: 0`. To call a state you type `this.state.` followed by the name of the state object.

```react
class App extends React.Component {
constructor() {
this.state = {count: 0}
}
render() {
return (
<h1>The current value is {this.state.count}</h1>
)
  }
}
root.render(<App />)
/*It renders "The current value is 0" because the 
states value is 0*/
```
<br>
States also have functions and methods that are made for them. `ComponentDidMount()` is a function used to change a state object’s value after the website or app loads. We change a state's value entirely by using `this.setState()` which, as the name suggests, sets the state's value. In fact to change a states value with `ComponentDidMount()` you need `setState()` to set the new value.

```react
class App extends React.Component {
constructor(props) {
super(props);
this.state={count: 0}
}
componentDidMount() {
this.setState({count: 1});
  }
//The count states value is now 1
}
```
<br>
On the example below we made a click counter using these state methods and functions. We made it so that every time a button is clicked it calls a function that adds the state's value by 1 using `this.setState()`. Above the button text that shows the number of times the button has been clicked.
{% stackblitz https://stackblitz.com/edit/js-u9ghtg?file=index.js %}
<br>
That's all for now! Next time we'll be talking about how to use multiple components from different files! If you have any questions or things I should add comment them below, other than that have a great day/night👋.