###### Table of Contents
- [[#Create a Class Component]]
- [[#Props]]
- [[#Props in the Constructor]]
- [[#React Class Component State]]
- [[#Creating the state Object]]
- [[#Changing the `state` Object]]
- [[#Updating State from previous State]]
## Create a Class Component
The component has to include the `extends React.Component` statement, which creates an inheritance to `React.Component`, and gives your component access to React.Component's functions.
The component also requires a `render()` method, which returns HTML.
```jsx
// Create a Class component named Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
// Display the Car component in the root element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
```
If there is a `` `constructor()` `` function in your component, this function will be called when the component gets initiated and is where component's properties get initiated.
Component properties should be kept in an object called `state`.
The `super()` statement, which executes the parent component's constructor function, is also in the `constructor()` function, and gives the component access to all the functions of the parent component (`React.Component`).
```jsx
// Create a constructor function in the Car component, and add a color property:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
```
^481203
## Props
Another way of handling component properties is by using `props`.
In class components, props are not accessed via parameters, like they are in functional components; props are a property of the component itself, so `this` refers to the component instance.
```jsx
//Use an attribute to pass a color to the Car component, and use it in the render() function
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
```
### Props in the Constructor
If the component has a constructor function, the props should always be passed to the constructor and also to the `React.Component` via the `super()` method.
```jsx
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car model="Mustang"/>);
```
## React Class Component State
React Class components have a built-in `state` object.
(see `state` example in the in the component constructor section above [[React/Class Components#^481203]])
The `state` object is where you store property values that belong to the component.
When the `state` object changes, the component re-renders.
### Creating the state Object
The state object is initialized in the constructor:
```jsx
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
```
Another way to initialize state inside a React Class component. In addition to initializing inside a Class `constructor()`, you can also initialize directly inside the Class definition using a class property:
```jsx
// Omit the constructor() method and super() and reference the state property directly, using the Class property syntax
class Counter extends React.Component {
state = {
score: 0
}
}
```
### Changing the `state` Object
To change a value in the state object, use the `this.setState()` method.
When a value in the `state` object changes, the component will re-render, meaning that the output will change according to the new value(s).
```jsx
// Add a button with an `onClick` event that will change the color property
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
```
#### Updating State from previous State
Because state may be updated asynchronously, whenever you need to update state based on previous state, like update a score based on the previous score, you shouldn't rely on `this.state` to calculate the next state, as it may not always lead to the component re-rendering with the new data and could cause state inconsistency.
So instead of an object, `setState` also accepts a call back function that produces state based on the previous state in a more reliable way.
```jsx
...
incrementScore = () => {
this.setState(prevState => {
return {
score: prevState.score + 1
}
});
}
...
```
#### More info
[Some website](https://test.com)
___
**Tags**: #react #class-components