react.js BEST WAY: show or hide html element on state change

Question

What is the best way to hide or show a div (or whatever element) on a state change.

Here is what I did:

React.useEffect(()=>{
  (async () => {
      alert(props.changeVisibiltyEvent)
  })()
},[props.changeVisibiltyEvent])

This effect is called whenever something else happens in my app. The alert displays a 0 or a 1.

If it is zero, the element should be invisible, if it is one, I want it to become visible. Easy.

This is the element:

          <td style={{ visibility: 'hidden' }}>
             <Button  variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button>
          </td>

I managed to find the attribute 'hidden' to hide it and 'visible' to show it.

What is the best practice to bind the state changed 0 or 1 to visible to hidden in the element?

`style={{ visibility: bool_state? 'visible' : 'hidden' }}>` should be good — Reut Schremer, Nov 11 '21 at 15:02
hello Reut, your answer seems the best to me, please post as full answer :) — innom, Nov 11 '21 at 15:06
Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) — Emile Bergeron, Nov 11 '21 at 15:41

score 2 · Accepted Answer · edited Nov 11 '21 at 15:53

2

You can always use conditions in your render method, but be sure not to use them too much. In this case, you can use

style={{ visibility: props.changeVisibilityEvent? 'visible' : 'hidden' }}> to hide the component, or use

{props.changeVisibilityEvent && <td>...}

Notice that when you use the second approach you might see 0 on your page, because the condition returns false and the render method includes the result, even if it's not a component as you wanted.

edited Nov 11 '21 at 15:53

Dharman

30,962
25
85
135

answered Nov 11 '21 at 15:11

Reut Schremer

348
2
15

1

I ended up using: style={{ display: props.changeVisibiltyEvent? 'inline-block' : 'none' }} to display and remove the element but thanks for the guidance – innom Nov 11 '21 at 15:22

score 1 · Answer 2 · answered Nov 11 '21 at 15:06

You can add a condition into your return statement such that

{props.changeVisibilityEvent && <td>
    <Button  variant="contained" onClick={() => changeCase('closeCase')}>fall schließen</Button>
</td>}

Note that in the above case props.changeVisibilityEvent needs to be an integer so that 0 resolves as false whereas 1 would resolve as true. If it's a string you can write the condition as props.changeVisibilityEvent === '1'

score -1 · Answer 3 · edited Nov 11 '21 at 15:11

-1

Just check the state and according to this state u can toogle some class. (Check if state is true). If 1 - add class. If 0 - remove the class.

edited Nov 11 '21 at 15:11

Dharman

30,962
25
85
135

answered Nov 11 '21 at 15:05

Roma Roma

67
1
3

react.js BEST WAY: show or hide html element on state change

3 Answers3