score:0
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'
}
Source: stackoverflow.com
Related Query
- Style does not change when my component receive a new props
- Component does not receive props from getStaticProps when wrapped with HOC
- Component does not remount when route parameters change
- React shouldComponentUpdate() is called even when props or state for that component did not change
- Component not updating when I change the props that I pass to it in React
- D3 component does not re-draw after receiving new props
- React Router "Link to" does not load new data when called from inside the same component
- React child component not updating when props change
- Sorting redux store array with sortBy redux action does not send new props to component
- date in moment.js does not change when submit new transaction still save last date until refresh server
- Inline style does not want to change when clicked on div
- Why does this React/Mobx observer component not rerender when its observable props change?
- React - child component not updating when receiving new props
- connect not change the props of child component when the prop object modified
- React Router Dom & Firebase Auth: history.push changes url but does not render new component when called after firebase auth create account
- Unit test does not fail when I change my React component changes
- State does not change via redux when default props is assigned
- CSS selector attributes does not work when adding style to component
- Dropdown Component does not change on Props change
- React wrapper component (HOC) does not re-render child component when it's props are changing
- Component does not update after props change with componentDidUpdate
- React functional component state change does not trigger child component to re-read its props
- Why when a component is wrapped inside a High Order Component, the new component does not have any of the static methods of the original component?
- React child component does not receive props on first load
- components css styling does not change when re-rendering it with different props (rerender())
- Component does not display or change when clicking the navBar button
- ReactJs: Component does not receive props from the store
- Component not re-mounting when new props is passed
- react component not rerendering when props change
- Why does React component keep logging console statement when not passed any props
More Query from same tag
- Why I cant put the highcharts.chart in render?
- How to Find a specific value in nested object
- Add break line inside React JSX textarea
- how to handle an array with filter().map in react js
- React callback to scroll after all children are rendered
- NPM errors while installing react.js
- Url Parameters not able to recieved in component in react Js when Passing Props with Route
- React - Ant Design change default filter icon in table to material icon
- React useEffect isn't getting data from firestore
- REACT and JSON question. How to save data inputted into a Form created in react into JSON?
- ReactJS app can't load background image
- Rendering data that being passed from parent component to a modal children on react
- react bootstrap accordion plus minus indicators issue
- Code Mirror will not function in my React application
- How to lift state up in React from a response with Axios?
- make http post request with reactJs and NodeJs
- Module not Found: Can't resolve Context
- React native iOS error - "RCTNetworking.sendRequest not found"
- jsx element type 'yyy' is not a constructor function for jsx elements. property 'yyy' is protected in type 'yyy' but public in type 'elementclass'
- Converting array into object of array in react
- When calling Firebase cloud function locally I receive a 200 response but the response is a cors type response not my actual data
- Set delay for axios get request in useEffect
- output array into a new div named "row" after 4 elements
- Rearranging react grid when screen resizes
- How to make a react bootstrap dropdown with panelgroups
- Alignment of the component in reactJS
- seperate submit component in react-final-form
- Firebase auth, React: Auth sporadically failing
- How to get handle on current object with a React function component
- How to render a React component (ES6 API) directly using ReactDOM?