Accepted answer

This is more related to Javascript than ReactJS in particular. I think you're passing status to your Component as a string. So, how the comparison happens when your Component sees this is:

if('true' == true)

So, the comparison happens between a string and boolean. Due to type coercion, Javascript converts both to Number and does the comparison. See this for more details. string value is evaluated to NaN and true value to 1. So the comparison after coercion is:

if(NaN == 1)

which will always give false hence your result.

In order to fix this issue you should be using both operators as string like this:

if(this.props.status == 'true')

Although, as a better practice, it's always better to use === for strict equality. Also you're accessing a variable outside its scope (which will work here but not a good practice). A better version of the code would be:

var BodyVisibility = {
    display: 'none'

if(this.props.status === 'true'){
    BodyVisibility.display = 'visible'

Related Query

More Query from same tag