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?
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.
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'
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.