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.

  1. 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.
  1. 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.

  2. 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

react.js - communicating between sibling components


Related Query

More Query from same tag