score:1
Accepted answer
react portals is what i was looking for.
as per my question, i wanted to have same context for all the components mounted at different locations (dom nodes).
portals solved exactly this issue. now, i can have one context component housing all the components that exist on that page. like this:
const dashboardcontextdom = document.getelementbyid('dashboard-root');
const comp1dom = document.getelementbyid('comp1-root');
const comp2dom = document.getelementbyid('comp2-root');
const dashboard = () => {
return (
<>
{reactdom.createportal(<component1 />, comp1dom)}
{reactdom.createportal(<component2 />, comp2dom)}
</>
);
}
if(dashboardcontextdom) {
reactdom.render(<dashboard />, dashboardcontextdom);
}
with these components housed in one context allows to easily pass state from one component to another via prop drilling
and lifting state up
.
score:0
you have two options with react:
- move
component 1
andcomponent 2
and their state into a parent component, and pass the parent's update state function to them:
componentwrapper {
...
const updatestate = () => {
//update state
}
return (
<component 1 updateparentstate={updatestate}/>
<component 2 updateparentstate={updatestate}/>
)
...
}
- you cannot update the state of a component that is not a parent or a child without using an external state management solution, such as redux or the new usecontext api/hook. these libraries involve moving all individual component's states to a larger centralized global state, which can be updated and accessed by all components.
Source: stackoverflow.com
Related Query
- sharing data between disconnected components
- Sharing data between components in React
- Sharing data between React components
- React Router sharing data between components
- Data Sharing between Sibling Functional Components - ReactJS
- Sharing data between sibling form components
- How to pass data between functional components in React?
- Passing data between two sibling React.js components
- How can I share state data between components using custom hooks?
- sharing states between two components with useReducer
- React.js pass data between components flow
- Sharing components between two react apps
- Sharing data between slice reducers when using createReducer
- Redux sharing actions between components
- Passing Data between react components
- How would you transfer data between components in React?
- How can i share data between non-related components in react js?
- How to pass data between components in ReactJS?
- How Do I Pass a Function Through A React Component For Data Sharing Between Parent and Child?
- Editable React table: pass data between components
- React: Passing data between components using Router in App.js(parent component)
- How can I pass data between sibling components in React?
- React: Using parent to pass data between sibling components
- Passing data between components in React/Redux
- Communicating data between react routes or components which have no relation
- Passing Ajax/service data between components in React.js
- Sharing props/state between two components in react
- Sharing Components between 2 projects while retaining hot reload
- Sending data between react components
- Sharing State Between Components
More Query from same tag
- React native - Change screen after x seconds
- How to read from a csv file in a React app?
- I try the hide banner and categories component whlle routes are AuthRoute and ProductRoute
- How to save Multiple form on one request in React?
- Prop is undefined when passed to functional component in react
- Reactjs Nested Routing: Nested Children Are Not Rendering
- disable checkbox selection in Ag-grid
- How do I import React component based on a dependancy?
- Why is useEffect not being triggered?
- Using Cypress.io to test React in a Maven project
- Send form data to a pdfkit iframe document
- Pushing indents before and after main body in typescript?
- Using URL Parameters in Protected Routes in React + Firestore
- React Link - TypeError: Cannot read properties of undefined (reading 'pathname')
- How do i find out what type of object this is? (React/Typescript)
- Check the render method of `ConnectedField`
- Can actions dispatched using mapDispatchToProps be accessed in any component or just in the component mapDispatchToProps is written
- De-bounce calls based on dispatch loop in React
- AWS CodeBuild not generating build folder - NodeJS
- How to style a React Component in the HTML
- Force an Asynchronous call to behave Synchronously
- Problem with fetch API while deploying MERN app to Heroku
- Console.log prints twice and map doesn't work in reactjs/mobx project
- TypeError: Cannot read property 'book' of undefined at BookDetails.render
- Conditional filename in webpack config output
- React search based on Axios API fetch
- CORS error despite using cors middleware in nodejs api
- Coordinates array from PolylineMeasure plugin (react leaflet)
- Testing components that contain react router Link with Enzyme
- Pass a JSX element to storybook parameters in a custom build addon