# Context Consumer in Function-based Component

## Creating a Context Consumer in FBC

To use `context` with functional components, we wrap elements in an instance of `<ThemeContext.Consumer>` and within that, **provide a function** which returns the elements (a technique similar to **render props**).

{% tabs %}
{% tab title="themeContext.js" %}

```jsx
import React from "react"
// Creating context
const ThemeContext = React.createContext()
export default ThemeContext
```

{% endtab %}

{% tab title="Header.js" %}

```jsx
import React, {Component} from "react"
import ThemeContext from "./themeContext"

function Header(props) {
    return (
        // Consuming context using 'render prop' technique
        <ThemeContext.Consumer>
        {(theme) => {
            return(
                <header className={`${theme}-theme`}>
                    <h2>{theme === "light" ? "Light" : "Dark"} Theme</h2>
                </header>        
            ) 
        }}
        </ThemeContext.Consumer>
    )    
}

export default Header

```

{% endtab %}

{% tab title="Button.js" %}

```jsx
import React from "react"
import ThemeContext from "./themeContext"

function Button(props) {
    return (
        // Consuming context using 'render prop' technique
        <ThemeContext.Consumer>
            {(theme) => {
                return(
                    <button className={`${theme}-theme`}>Switch Theme</button>    
                )   
            }}
        </ThemeContext.Consumer>
    )    
}

export default Button
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React from "react"

import Header from "./Header"
import Button from "./Button"
import ThemeContext from "./themeContext"

function App() {
    return (
        <div>
            // Components Consuming context
            <Header />
            <Button />
        </div>
    )
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"
import ThemeContext from "./themeContext"

ReactDOM.render(
    // App component Providing Context
    <ThemeContext.Provider value={"dark"}>
        <App />
    </ThemeContext.Provider>, 
    document.getElementById("root")
)
```

{% endtab %}
{% endtabs %}

If we don't want same type of each component to consume the context we can specify that.

{% tabs %}
{% tab title="themeContext.js" %}

```jsx
import React from "react"
// Creating context
const ThemeContext = React.createContext()
export default ThemeContext
```

{% endtab %}

{% tab title="Header.js" %}

```jsx
import React, {Component} from "react"
import ThemeContext from "./themeContext"

function Header(props) {
    return (
        // Consuming context using 'render prop' technique
        <ThemeContext.Consumer>
        {(theme) => {
            return(
                <header className={`${theme}-theme`}>
                    <h2>{theme === "light" ? "Light" : "Dark"} Theme</h2>
                </header>        
            ) 
        }}
        </ThemeContext.Consumer>
    )    
}

export default Header

```

{% endtab %}

{% tab title="Button.js" %}

```jsx
import React from "react"
import ThemeContext from "./themeContext"

function Button(props) {
    return (
        <button className={`${props.theme}-theme`}>Switch Theme</button>
    )    
}

// Defining defaultprops
Button.defaultProps = {
    theme: "dark"
}

export default Button
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React from "react"

import Header from "./Header"
import Button from "./Button"
import ThemeContext from "./themeContext"

function App() {
    return (
        <div>
            <Header />
            
            // Button component Consuming context
            <ThemeContext.Consumer>
                {(theme) => {
                    return(
                        <Button theme={theme} />        
                    )
                }}
            </ThemeContext.Consumer>
            
            // Button component NOT Consuming context
            <Button />
        </div>
    )
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

import App from "./App"
import ThemeContext from "./themeContext"

ReactDOM.render(
    // App component Providing Context
    <ThemeContext.Provider value={"dark"}>
        <App />
    </ThemeContext.Provider>, 
    document.getElementById("root")
)
```

{% endtab %}
{% endtabs %}
