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

Question

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

 <input type="checkbox" ng-model="myVar"> <div ng-show="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> </div> 

In Angular , the above code works very well, but I am trying to do this using a reaction, I cannot find the equivalent ....

Answer 1

Finally, it worked after an hour of searching, using a conditional expression like this:

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

Answer 2

The proposed solutions are actually "ng-if" equivalents of React. If you use ng-if and the status is false, the component will not display in the DOM. If you use ng-show / hide, it will appear in the DOM, but it will be hidden in the browser.

In many cases, the {myVar && <div />} solution will work as expected, but there may be times when it is not an ideal solution. Because it will load / unload the component, not show / hide. For instance; if you have a tab container and you use it to show / hide the contents of the tab; depending on the selected tab, every time you load / unload other content. This can be a problem if you use reduction molds or similar approaches. Here you need some kind of ng-show, not ng-if.

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

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

Answer 3

In Reactjs, like angular js, nothing is displayed to show and hide. Reactjs is used to display views. But you can use the ternary operator to fill out your request as follows: -

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

Answer 4

If you are looking for something even closer to Angular ng- show / ng- hide / ng-, if for React, instead of mixing JSX expressions with ES6 - which is not so elegant, you can try the module I created - Tersus -jsx.macro.

Instead of doing this:

 <div> {(a === 0) && ( <button id="gotoA" className="link" onClick={clicking} /> )} </div> 

Now you can simply define the tj-if support in exactly the same way as we did in AngularJS:

 <div> <button tj-if={a === 0} id="gotoA" className="link" onClick={clicking} /> </div> 

Also, thanks to the latest version of the app, create-responsive-app now supports Babel-Macro out of the box. All you need to do is npm install this module, wrap the "tersus" rendering result and start assigning the details. It also supports ng-repeat / ng- (using tj-for) and can be used in conjunction with tj-if.

You can install this from: https://www.npmjs.com/package/tersus-jsx.macro