score:0
you can coordinate state between the selects through the parent. pass a callback function to source
that gets called when it's onchange handler fires, passing the selected language up to the parent. in the parent, create a piece of state for the current selected language and pass it as a prop to target
. in target you can have a useeffect
with that prop in the dependency array so whenever the selected language changes in source
, target
will make the appropriate api call.
score:0
you will have three options to have connection between two separate components.
- make parent as the connector between two children.
e.g, use a function props to trigger handler in parent. this handler will change the state of parent and it will lead to change the props of another children like how @evanmorrison has answered.
you can use a global state tree , a state management library like redux, mobx or flux which will help you manage a single source of truth. therefore, when you dispatch an action in one component, the state can be detected at another component and then use an useeffect hook to trigger again using the state as a dependency.
another pattern is to use context api, but even for me, i rarely use it although understand the concepts.
you can find more explanation and examples here.
https://reactjs.org/docs/context.html#updating-context-from-a-nested-component
Source: stackoverflow.com
Related Query
- One dropdown menu affects another dropdown menu
- How to make one dropdown menu dependent on another
- React - how to populate one select menu based on a value of another select menu using data from a local .json file
- React - How to Populate one Dropdowns based on selection from another Dropdown by Passing State as props
- One dropdown field leading to updated values for another dropdown field
- @szhsin/react-menu can't get Menu items inline, always one on top of another
- Keep just one dropdown menu visible at a time
- React.js: Wrapping one component into another
- How to make a dropdown menu open below the Appbar using Material-UI?
- How to get selected value of a dropdown menu in ReactJS
- How to access one component's state from another component
- ReactJS - Call One Component Method From Another Component
- how to navigate from one page to another in react js?
- Accessing a part of reducer state from one reducer within another reducer
- How to dispatch multiple actions one after another
- Calling one action from another action creator
- Reactjs - passing state value from one component to another
- Replace array item with another one without mutating state
- React Material-UI dropdown menu not working
- How to pass props from one class to another in React.js
- react-select How to hide dropdown menu programmatically when 'no results found' is shown?
- How to validate one field against another with Yup?
- Remove caret from semantic-ui react dropdown menu
- Update one Field based on another
- How to replace a component with another one upon event (button click) in react js
- Using one webpack project inside another with react hooks causes an error
- Calling one async function inside another in redux-thunk
- You cannot render a <Router> inside another <Router>. You should never have more than one in your app
- React Formik updating one field based on another
- React-select sometimes doesn't display the options in the dropdown menu on async search
More Query from same tag
- Adding two kebab case css class in an element in react
- this.setState not working for this code in React
- Cant understand this arrow function
- React: Expected an assignment or function call and instead saw an expression
- How to get updated constructor data in React
- How to make vantajs wave work with react app
- React set audio.ended listener
- NEXTJS google trend API
- Flask get a multi-dimensional array posted to it as an array
- Make Blacklist JWT tokens for spring boot
- React - componentWillReceiveProps condition doesn't render the data in the component
- How to use template literals (``) within template literals?
- Query search after user has typed for a few seconds Meteor + React
- On click and mouse up in same component in react?
- Patch multiple id's with one request with React Query
- How to set a variable to false when ipad orientation is changed from landscape to portrait and vice versa using javascript and react?
- Render a table with an if condition in react
- Why can't TypeScript see that a nested value cannot be undefined?
- How to make store.dispatch() available in an action.js file apart from getting it as props?
- Display element based on event fired and props passed in
- Material UI - Facing an issue that drop down options are coming below the modal window footer
- What is the best way to structure api config file in react project?
- Material UI - Render / Open Menu Dynamically
- Component is not rendering
- Add JSX to Array object Javascript
- How to find the trigger that caused the update in React 16?
- React lifecycle methods. When does an app render to the screen?
- Reset imported js file when back button is pressed
- UseReducer dispatch function throws unexpected error: Expected 0 arguments, but got 1
- react router dom flickers to fallout router while fetching data from server - react 6