I am having problems in export a Context from a Component. The ponent that holds the context is below.

import React, { Component, createContext} from 'react';


export const MyContext = React.createContext('');

export default class ComponentOne extends Component {
   ....
   ....
   render(){
     return(
     <MyContext.Provider value={'value1'}>
      <div>....</div>
     </MyContext.Provider>
     )
   }

}

The ponent that wants to import the Context is below

import React, { Component}  from 'react'
import { MyContext } from "../ComponentOne/Index.js"

export default class ComponentTwo extends Component{
render(){
  console.log(this.props)
  return(
    <MyContext.Consumer>
    </MyContext.Consumer>
  )
}
}

The Error I'm getting is

TypeError: render is not a function

I am having problems in export a Context from a Component. The ponent that holds the context is below.

import React, { Component, createContext} from 'react';


export const MyContext = React.createContext('');

export default class ComponentOne extends Component {
   ....
   ....
   render(){
     return(
     <MyContext.Provider value={'value1'}>
      <div>....</div>
     </MyContext.Provider>
     )
   }

}

The ponent that wants to import the Context is below

import React, { Component}  from 'react'
import { MyContext } from "../ComponentOne/Index.js"

export default class ComponentTwo extends Component{
render(){
  console.log(this.props)
  return(
    <MyContext.Consumer>
    </MyContext.Consumer>
  )
}
}

The Error I'm getting is

TypeError: render is not a function

• javascript
• reactjs

Share Improve this question Follow edited Nov 26, 2019 at 11:07 majid beg asked Nov 26, 2019 at 10:44 majid begmajid beg 19644 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Context Provider requires a children.

 <MyContext.Provider value={'value1'}>
    <ComponentTwo />
  </MyContext.Provider>

The context is available to MyContext.Provider children.

In your case, you need to render ComponentTwo within the provider, and as a consumer, read the value provided:

import React from 'react';
import ReactDOM from 'react-dom';

export const MyContext = React.createContext('');

class ComponentTwo extends React.Component {
  render() {
    return (
      <MyContext.Consumer>{value => <div>{value}</div>}</MyContext.Consumer>
    );
  }
}

class ComponentOne extends React.Component {
  render() {
    return (
      <MyContext.Provider value={'value1'}>
        <ComponentTwo />
      </MyContext.Provider>
    );
  }
}

ReactDOM.render(<ComponentOne />, document.getElementById('root'));

The error might be because of not reading the value inside the Context.Consumer.

Reference: Context API.