0

I have some navigation which is a react component. I then have a link in my content further down my page. When the link is clicked I want to add a CSS class to the navigation component.

They are completely separate components.

In the past I might use jQuery to target the nav, then use the addClass() function. I am struggling to figure this out in React.

32423hjh32423
  • 3,048
  • 7
  • 44
  • 59
  • Please take a look ate lifting up the state: https://reactjs.org/docs/lifting-state-up.html – Nir Ben-Yair Jan 18 '18 at 10:13
  • 2
    It will make it **much** more likely you'll get useful answers if you include a [mcve] in the question demonstrating the problem/situation, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button). Stack Snippets support React, including JSX; [here's how to do one](http://meta.stackoverflow.com/questions/338537/). – T.J. Crowder Jan 18 '18 at 10:14
  • Probably not an exact duplicate but very similar: https://stackoverflow.com/q/21285923 – Al.G. Jan 18 '18 at 10:17

2 Answers2

1

for that, you have 2 options:

  1. use a state management library such as Redux.
  2. lifting up the state: https://reactjs.org/docs/lifting-state-up.html

In short, both of your components need to have the same father component, with a state, you will need to change the father component state, and the child component's props accordingly.

Nir Ben-Yair
  • 1,566
  • 3
  • 14
  • 18
1

Maybe you should try the portals ?

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

jb cazaux
  • 322
  • 1
  • 8