0

So i have the following components structure : 

                          1
                        /   \
                       2     4 
                       |     |
                       3     5

Component 3 is a marker displayed on a map. Component 5 is a list representing the markers on the map.

Will it be possible that once an onClick event happens on component 5 it will trigger some function/state in component 3 to open an infowindow?

Mike.G
  • 125
  • 5
  • 14

1 Answers1

1

Yes, If you are using just React, then you can pass the click handle function from Root component (1) to component 5 and toggle the state for info window in there and pass the info window state all the way from Root component (1) to component (3).

Another way would be using Redux. Where you can dispatch a onclick action from component 5 to change the Redux store value and make the component 3 to connect to the redux store

Mahima
  • 83
  • 4
  • Do i need to have a state in component 3? – Mike.G Jul 31 '18 at 20:08
  • No, you don't need to have a state in component 5 . The info window toggle state will be maintained at root component and passed as props to component 3. – Mahima Jul 31 '18 at 20:15
  • In this case won't it be a single state for all the markers so once ill change it to true it will be passed to all the markers and then all the windows will toggle? – Mike.G Jul 31 '18 at 20:17
  • No you don't need state in component 5. As @Mahima stated, you need to pass a function from component 1 to component to component 4 to component 5 that is called from the onClick in component 5. That function in component 1 will alter the state of component 1. That state value from component 1 will be passed to component 2 then component 3. – SomethingOn Jul 31 '18 at 20:19
  • @mahima well so I have done as you recommended but now I have a different issue when I click on my list on component 5 it does open the infowindow on the wanted marker, but now the issue is if I click on the marker directly nothing will happen – Mike.G Jul 31 '18 at 21:21