# React Class Components

There are two kinds of components in React - function components and class components. Function components and hooks are the modern way of writing React but there are still a lot of legacy codebases using class components so it's still a must-know for any React developer.

#### Basic component

* Class components must inherit from `Component` and have a render method that returns `jsx`
* We can access props through `this.props`

```jsx
import { Component } from "react";

class AdoptionListing extends Component {
  render() {
    const { name, imageURL } = this.props;
    return (
      <div className="kitten">
        <h3>{name}</h3>
        <img src={imageURL} alt="Kitten" />
        <p>{name} is available for adoption</p>
        <button>Adopt</button>
      </div>
    );
  }
}

const App = () => {
  return (
    <>
      <AdoptionListing name="Mittens" imageURL="http://placekitten.com/200/150" />
      <AdoptionListing name="Bobo" imageURL="http://placekitten.com/201/150" />
      <AdoptionListing name="Mickey" imageURL="http://placekitten.com/202/150" />
    </>
  );
};
```

#### State & Event Handlers

* Initialise the state object either using a `constructor` or the simpler field declaration syntax
* Access state through `this.state`
* Update state through `this.setState` (same immutable update rules apply)
* Define event handlers as a method and use an arrow function to bind `this` to the instance

```jsx
import { Component } from "react";

class AdoptionListing extends Component {
  state = {
    adopted: false,
  };

  adopt = () => {
    this.setState({ adopted: true });
  };

  render() {
    const { name, imageURL } = this.props;
    return (
      <div className="kitten">
        <h3>{name}</h3>
        <img src={imageURL} alt="Kitten" />
        <p>
          {name}
          {this.state.adopted
            ? " has been adopted!"
            : " is available for adoption"}
        </p>
        {!this.state.adopted && <button onClick={this.adopt}>Adopt</button>}
      </div>
    );
  }
}
```