# Context Consumer

## Consuming Value with`contextType`

There are several ways to consume `context`. The most straightforward (but most restrictive), is to **add a static property** to the class-based component.

```javascript
// Adding contextType
Component.contextType = ThemeContext;
```

`contextType` property on a class lets us **consume the nearest current value of that Context type** using `this.context`. We can then use string interpolation to use it in your component.

```jsx
class Button extends Component {
    render() {
        // consuming context value inside our component
        const theme = this.context
        return (
            <button className={`${theme}-theme`}>Switch Theme</button>
        )    
    }
}

Button.contextType = ThemeContext;
```
