CODEWITHSUNDEEP
javascriptreactjsreact-functional-componentreact-context
Jawad Ali
Jawad Ali

Reputation: 71

Render is not a function updateContextConsumer

I have 3 components (CompA, CompB, CompC) I want to send data to from CompA to CompC but it is showing error Render is not a function updateContextConsumer. I am using functional components

import React,{ createContext } from 'react';
import './App.css';
import CompA from './ContextApi/CompA';

const FirstName = createContext();

function App() {
  return (
    <>
      <FirstName.Provider value={"JD"}>
        <CompA/>
      </FirstName.Provider>
    </>
  );
}

export default App;
export {FirstName}; 


import React from 'react';
import CompB from './CompB';

const CompA = () =>{
    return(
        <CompB/>
    )
}

export default CompA;

import React from 'react';
import CompC from './CompC';

const CompB = () =>{
    return(
        <CompC/>
    )
}

export default CompB;

import React from 'react';
import {FirstName} from '../App';

const CompC = () =>{
    return(
        <>
            <FirstName.Consumer> {fname=>(<h1>{fname}</h1>) } </FirstName.Consumer>
        </>
    )
}

export default CompC;

Image of error is here

enter image description here

Upvotes: 0

Views: 54

Answers (1)

Ben Stephens
Ben Stephens

Reputation: 3371

I believe the issue is the spaces between the end of <FirstName.Consumer> and the { and the } and </FirstName.Consumer>. The following does not work with those spaces left in:

const FirstName = React.createContext();

const CompA = () =>{
    return (
        <CompB/>
    )
};

const CompB = () =>{
    return (
        <CompC/>
    )
};

const CompC = () => {
    return(
        <React.Fragment>
            <FirstName.Consumer>{ (fname) => (<h1>{fname}</h1>) }</FirstName.Consumer>
        </React.Fragment>
    )
};

function App() {
  return (
    <React.Fragment>
      <FirstName.Provider value={"JD"}>
        <CompA/>
      </FirstName.Provider>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

You could also put the { (fname) => (<h1>{fname}</h1>) } part on a separate line like shown here: https://reactjs.org/docs/context.html#contextconsumer

Upvotes: 1

Related Questions