passing data from the parent component state to the child component using React.createContext

Question

I have a component that contains a state, and I will pass the state data into another component, I use a static contextType to throw the state data but the data does not reach the intended component, what do you think this is wrong? thank you

this is my parent component

export const MyContext = React.createContext();

export class MerchantByPromo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataPromo: [],
      loading: true
    };
  }

  async componentDidMount() {
    const merchant_id = this.props.match.params.id_merchant
    await Api.post('language/promo-voucher-by-merchant', { MERCHANT_ID: merchant_id })
      .then((response) => {
        if (response.data.STATUS_CODE === '200') {
          this.setState({
            dataPromo: response.data.DATA,
            loading: false
          });
        }
      })
  }

this is my child component

import React, { Component } from 'react'
import { MyContext } from './MerchantByPromo'

export class MerchantByPromoDetail extends Component {
  constructor(props){
    super(props)
    this.state = {
      detailPromo:[],
    }
  }

  UNSAFE_componentWillMount(){
    let value = this.context
    console.log(value)
  }

  componentDidMount(){

  }

  render() {
    return (
      <MyContext.Consumer>
        <p>tes</p>
      </MyContext.Consumer>
    )
  }
}

I always get an error message like this "TypeError: render is not a function", what's the solution?

Answer 1

  <MyContext.Consumer>
    {() => <p>tes</p>}
  </MyContext.Consumer>

change to this and Check