score:1

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


Related Query

More Query from same tag