Is there an equivalent for ng-show and ng-hide in react js?

Finally, it has worked after an hour of search using the conditional expression like this:

{!myVar && <div>
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>}

Nothing is there in Reactjs like angular js to show and hide. Reactjs use to show the view. But you can use the ternary operator to full fill your requiremenet like this:-

{myVar ? <div>
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div> 
: null}

Suggested solutions are actually "ng-if" equivalents of React. If you use ng-if and the state is false then the component won't appear in DOM. If you use ng-show/hide it will appear in DOM but it will be hidden in the browser.

In many cases {myVar && <div />} solution will work as expected but there might be cases where this is not the ideal solution. Because this will load/unload the component and not show/hide. For example; if you have tab container and you're using this to show/hide tab contents; depending on the selected tab, each time you will load/unload other contents. This might be an issue if you're using redux-form or similar approaches. Here you do need an ng-show kinda solution and not ng-if.

Since React does not have attribute directives, you either need to write an HOC or a wrapper component(element directive) that handles this. Or simply add a dynamic inline style like this:

<div style={{ display: myVar ? 'block' : 'none' }}>
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>