score:0
This is how it can be achieved.
class BasElement extends React.Component {
componentDidMount() {
console.log(this.props.context);
}
render() {
return null;
}
}
const Element = () => (
<Context.Consumer>
{context =>
<BaseMapElement context={context} />
}
</Context.Consumer>
)
score:0
For the @wertzguy solution to work, you need to be sure that your store is defined like this:
// store.js
import React from 'react';
let user = {};
const UserContext = React.createContext({
user,
setUser: () => null
});
export { UserContext };
Then you can do
import { UserContext } from 'store';
console.log(UserContext._currentValue.user);
score:1
You can via an unsupported getter:
YourContext._currentValue
Note that it only works during render, not in an async function or other lifecycle events.
score:7
You can achieve this in functional components by with useContext
Hook.
You just need to import the Context from the file you initialised it in. In this case, DBContext
.
const contextValue = useContext(DBContext);
score:31
Update
As of React v16.6.0, you can use the context API like:
class App extends React.Component {
componentDidMount() {
console.log(this.context);
}
render() {
// render part here
// use context with this.context
}
}
App.contextType = CustomContext
However, the component can only access a single context. In order to use multiple context values, use the render prop pattern. More about Class.contextType.
If you are using the experimental public class fields syntax, you can use a static class field to initialize your contextType
:
class MyClass extends React.Component {
static contextType = MyContext;
render() {
let value = this.context;
/* render something based on the value */
}
}
Render Prop Pattern
When what I understand from the question, to use context inside your component but outside of the render, create a HOC to wrap the component:
const WithContext = (Component) => {
return (props) => (
<CustomContext.Consumer>
{value => <Component {...props} value={value} />}
</CustomContext.Consumer>
)
}
and then use it:
class App extends React.Component {
componentDidMount() {
console.log(this.props.value);
}
render() {
// render part here
}
}
export default WithContext(App);
Source: stackoverflow.com
Related Query
- How to get the data from React Context Consumer outside the render
- How to get data from react context
- How to set the default react context value as data from firestore?
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- How can I get the right data from database with react
- How do I get the new updated data from react hooks or useEffect?
- How to get the data from Redux store using class components in React
- How to get the response data from backend to React in React-dropzone-uploader
- how to get the data from child component in stepper in react material ui?
- How to get data from the backend that needs authorization using React
- How to reference a React Component class from outside the render function?
- how to get the data from a component within a form in react
- React js backend how to get the price_data info from stripe.checkout.session.line_items and push the data into firestore
- How to get the data from firebase realtime database in react js?
- How to get the React context from another context?
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- How to render the React component with dynamic data realtime from socket.io high efficiency
- How do I get the data from an API call, in a different file, in React
- How to get return data from another file outside of a react component?
- How to get the data from dropdown component in React and update state?
- React: how can I process the data I get from an API before I render it out?
- How to get data from the route url to put inside the callback function in React router?
- How to use data from a callback function in the render method in a react class
- Set the data in React Context from asynchronous API call
- How to pass the match when using render in Route component from react router (v4)
- How can I get a variable from the path in react router?
- How can I get data from a local file into my React app?
- How to get form data from input fields in React
- Laravel 5.5 render a React component in a blade view with data from the controller
- react-query: how to get the data from useQuery in onSuccess callback?
More Query from same tag
- this.props is undefined inside click event
- Rendering material-ui table vs HTML table [ ERROR: Element type is invalid]
- redux-toolkit action not triggered in reducer
- Using inline arrow function in react functional component
- How to do React-Table Dynamic Header?
- Can a useMemo memoized value be updated with useEffect from within the component?
- Utilizing environment variables in firebase-messaging-sw.js in React Boilerplate
- What is the difference between NextJs and Create React App
- When to use inline function on button onClick event - Javascript/React.js
- How to access ref from a non-related component?
- React Component as Const select onChange passing selected value
- Reac router can't acces params how to handle it?
- early returns in functional components in react
- How to get reference data inside map of parent data in Firebase
- How to configure Stylus support in a React.js application?
- Reactjs unable to pass data to parent object
- How to use jQuery UI with React JS
- how to use async/await method instead of this method
- Trying to align the text area and the button side by side
- Using css bootstrap only for accordian
- react-scripts' is not recognized as an internal or external command
- How do i restart a timer after a clearInterval() in reactjs?
- Add div fade-out in React with SCSS and conditional rendering of div
- Passing state from input to a switch with two arguments in React
- API call with ReactJs Component doesnt work
- Aws ec2 with lb does not return 101 on websocket
- TypeError: react__WEBPACK_IMPORTED_MODULE_6___default.a.useState is not a function
- Refactor dropdown component in React
- How to user null in map React JS
- Error in React Component - Failed to validate the users registration