score:12
Accepted answer
so it appears that all of the components get the child context of where they are created. in this case <baz />
is created as a part of foo
, so it gets the child context from foo
, which is why it's undefined.
couple of options.
1) set the child context on foo
.
2) recreate the <baz>
child in bar
. you can do this with clonewithprops.
render: function() {
console.log(this);
return react.addons.clonewithprops(this.props.children)
}
updated fiddle: https://jsfiddle.net/crob611/3h7pxnkx/2/
issue on react project discussing it: https://github.com/facebook/react/issues/3392
Source: stackoverflow.com
Related Query
- React context is undefined when the children are rendered using this.props.children
- when i increment the counter it increases by 2 not one. i am using react context for this
- No children are rendered when the user navigates to a specific route in react router
- Props that is being passed into React Route is undefined for the first render when using useEffect
- How to test if a component is rendered with the right props when using react-testing-library?
- why react props are passed undefined to the child component?
- NextJS bug: Component props are undefined when building the project (everything works fine on dev mode)
- how to pass props to the route when using react router <Link>
- React TypeScript callback reading undefined when using setState, but it will log the value
- React this is undefined when using setState
- Using React Hooks, when I pass down a prop from parent to a child component, the prop in the child component is undefined
- react redux props undefined on event listener when using mapDispatchToProps
- Props mix when using the same component multiple times on a page in React
- I have this `div` on my home page and want it to move with me when I scroll, I am using react for the website btw
- Props are undefined in react when passing through <Route/>
- How to test the value of the props of react component rendered using react testing library
- React TypeError: Object(...)(...) is undefined when using Context API
- React loading HOC: all the props provided in a list are set to optional and if any of them is undefined shows a spinner instead of the component
- How to fix "Uncaught Error: Objects are not valid as a React child" when passing objects, obtained from the blockchain, to the children components
- Props is always undefined when using <Link> with react router, on every page
- Input undefined when sending post request to the nodejs api using react and axios
- React has detected a change in the order of Hooks --- When using Context within a Hook
- React - how to add boolean field on props when using map(), given that the field will be changing
- Children are undefined when using <Route /> from react-router
- Why is this is undefined when mocking event in React unit testing, using sinon.spy to mock function and enzyme.shallow render for React Component?
- What are the best practices when using classnames, ids and data-attributes in React
- History push undefined when using props within Axios getData in React
- conditionally disable an option using react select not work when change option props passed to the Select
- Why doesnt the condition evaluate to false when not specifically checking for undefined value using react and typescript?
- What are the pros and cons on using React Context API with the useReducer() hook?
More Query from same tag
- How to upload multiple file with react/node and multer
- How to add/mix Vanilla Javascript with ReactJS
- Trying to run function only if state changes
- Gatsby: Clicking In-Route Anchor Element Leads to Re-Render
- Express session don't persist
- How to make react router Link load page like anchor tag?
- How to make react-typescript className to array
- how to create random number with click event in react
- Private Route - cannot be invoked without 'new'
- Updating Modal for CRUD (React / C# / Entity Framework Core)
- An example of using the 'react-leaflet' new useLeaflet() hook?
- React Redux, rerendering after data was fetched and mapped into component?
- How to set a global font family in react js?
- How to change the style of an element retrieved from JS getelementbyid in react?
- Cycle in dependencies between targets 'FBReactNativeSpec' and 'Yoga'; building could produce unreliable results
- React frontend cannot POST to Flask backend
- Animate a list of div's in React
- React js fill a map using axios inside a for loop
- React typescript, what are the render props?
- image doesn't display when I insert image in jsx file
- How to display a specific value from JSON object. Example i wanted to display the value of Low and then assign to a variable in React.js
- How to make a react component with Async data re-usable in Redux flow?
- How to assert a div in a React component's data attributes using Enzyme?
- How to test this statement using jest and enzyme
- use express, axios and fs.writeFileSync causes ERR_CONNECTION_REFUSED
- How to iterate ArrayVector in reactJS
- How can I horizontally scroll div by mouse wheel, locking the body scroll?
- cant update context state when using hooks with a complex object to set providers value
- TypeError: nameList.map is not a function by using antd validateFields() and getFieldValue get value null
- Prevent react component from rendering twice when using redux with componentWillMount