Vishnu Shekhawat Vishnu Shekhawat - 3 months ago 36
React JSX Question

why we cannot pass boolean value as props in React , it always demands string to be passed in my code

Although i have applied propType validation , But my editor gives error on passing boolean value for 'hasvacancy' prop ERROR :


'SyntaxError: JSX value should be either an expression or a quoted JSX
text'


. I know i am passing string type value for 'hasvacancy' prop but when what to do so that i can pas bool or other data types values in it.

import React from 'react';
import { render } from 'react-dom';


class VacancySign extends React.Component{

render(){
console.log('------------hasvacancy------',this.props.hasvacancy);
if(this.props.hasvacancy){
return(
<div>
<p>Vacancy</p>
</div>
);
}
else{
return(
<div>
<p>No-Vacancy</p>
</div>);
}

}
}

VacancySign.propTypes ={
hasvacancy: React.PropTypes.bool.isRequired
}

render(<VacancySign hasvacancy='false'/> , document.getElementById('root'));

Answer

You should enclose the boolean value in {}:

render(<VacancySign hasvacancy={false}/> , document.getElementById('root'));