# How to use React Context like a pro

In this example , we need to extract the object directly from the *value* of *ThemeContext.Provider*  *Line11/ App.js *    Component *by implementing*  a curly  braces  directly   in  our    **Function parameter**   * Three.js / Line13*




**App.js**


```
import React, { useState} from 'react';
import ThemeContext from './Context/ThemeContext';

class App extends React.Component {

    state = {
        theme :  ' dark '
     }

render() {
    return (

//line 10
        <ThemeContext.Provider  value= {{  ' theme ' :  this.state.theme  }} >
               <div>Hi From App</div>
          </ThemeContext.Provider>
  }

}

export default App;
```


=========================================


**NOT EXTRACTED  DIRECTLY**

**Two.js**

```
import React, { useState} from 'react';
import ThemeContext from './Context/ThemeContext';


function Two() {

    return (
        <ThemeContext.Consumer>

 // line 12
           {( lol ) => <>
              <h2> lol.theme</h2>
                 </>
            }
       </ThemeContext.Consumer>
       );

}

export default Two ;
```




> OR






**EXTRACTED DIRECTLY**

**Three.js**


```
import React, { useState} from 'react';
import ThemeContext from './Context/ThemeContext';


function Two() {

    return (
        <ThemeContext.Consumer>

   // we extract the object directly here
  // line 12
         {( { theme } ) => <>
              <h2> theme </h2>
                 </>
            }
       </ThemeContext.Consumer>
       );

}

export default Two ;
```