0

I've built a search ui using ReactiveSearch components and it works great! Now I'm trying to figure out how I can conditionally show the DataSearch component that I have in my Navbar based on the route/view that is being displayed.

For example on my homepage. I have a big DataSearch component search form in a jumbotron and I don't need/want the the DataSearch component that also displays in the Navbar.

I've looked at this and this but I'm not sure how to implement those in the context of the DataSearch component from ReactiveSearch.

UPDATE:

So I've been looking into how I can grab the url from React Router (v4) and it seems I can get it from doing this:

componentWillReceiveProps(nextProps) {
                if (nextProps.location !== this.props.location) {
...

So then I thought I could use something like location !== '/' && DataSearch but that doesn't work.

user3125823
  • 1,846
  • 2
  • 18
  • 46

1 Answers1

0

Have you tried any of these? 

{condition && <DataSearchComponent/>}

or

{condition ? <DataSearchComponent/> : <OtherComponent/>}
Cristian Muscalu
  • 9,007
  • 12
  • 44
  • 76
  • Muscala - Thanks for quick response. Been trying different things, still somewhat new to React so trying to understand it all. Quick question - I will need to set the state on all my components so that the Navbar component will know whether or not to display DataSearch? – user3125823 Sep 14 '18 at 14:48
  • once I figured out the condition part, it worked great. – user3125823 Sep 18 '18 at 13:41