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
Source: stackoverflow.com
Related Query
- TypeError: render is not a function updateContextConsumer
- Render is not a function updateContextConsumer
- React Context: TypeError: render is not a function
- Why do componentWillUpdate() and componentWillMount() not trigger render function when setState used in these methods?
- How to not use setState inside render function in React
- Why does react call render function if I have not changed the reference of the state?
- Making an Axios call within a forEach function to ammend an object is not being recognized in the render despite being in the state
- How to use React.useContext in a function that does not render any components?
- Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed
- Use serverless function to findById in MongoDB Database via Mongoose, and render result in React form - not working
- MobX, React Router v4, Route using render function not observing and re-rendering when store changes
- React Typescript - render function not applying types correctly
- React not rerendering props when render function is provided
- How to render a <Route/> from react-route-dom using a object and not a component / function
- class level variable updated inside a componentWillMount function not accessible in render method after a function call
- Map function not return item in render reactjs?
- Why does moving the array map of props outside the render function not work in React?
- React complains that hook is not used inside of a body function when my component is passed into another component to render
- react component is not getting called at all from render function
- React error: TypeError: render is not a function
- Getting image.map is not a function error while trying to render search list
- Reactjs map function does not render the component
- for loop not working in render function reactjs
- React Modal - call function with params onClick, not on render
- Render component using a function did not work?
- React-router : render is not a function
- Function does not work on first render instead the series is generated after the subsequent renders
- React Datasheet Grid - Render function does not allow to change
- Why can I not call my function inside the render ()?
- Faced TypeError: render is not a function when using Context API
More Query from same tag
- Chart line jumping instead interpolating correctly
- Redux action to reset - states are equal
- ReactJS: parsing csv date
- Image URL doesn't exist while using Sitecore with React JS?
- Get exact width and height of images in react
- How can I overwrite styles from a css framework while using webpack?
- React Component requires a unique key prop
- Can I force a state update using a class as a value?
- ReactJs load div after consuming an api / server socket
- How to Gatsby Link for 'mailto'?
- How to display date in firebase with react native
- ReactJS tutorial stuck at url attribute
- Persisting Stateful React Components
- ReactJS: unexpected token '<'
- Validating conditional pairs of props with Typescript
- JavaScript Input not allowing decimals
- useState to receive input data and post to console
- How to get all markers in google-maps-react
- Difference between location.pathname and match.url in react-router-dom?
- React Router v3 - IndexRoute not working in Google Cache
- React table can't filtering when change data by 'Cell' option
- React ref returns a 'Connect' object instead of DOM
- How to show the selected row in the modal
- React Router V6 routed component needs state/props from another routed component
- react-select: How do I resolve “Warning: Prop `id` did not match”
- Using Phaser together with React
- How to get a React Project running in Docker?
- How do I transpile React JSX and ES6 modules with babel and use browser native ES6
- Host frontend (react) and backend (ASP.NET Web Api) under the same Website in IIS
- React js random color