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

Solution 1:

You should enclose the boolean value in {}:

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

Solution 2:

I'm updating this answer, as my original one (omitting the value) is no longer considered best practice. Now, simply wrap your value in curly braces, as you would any other Component attribute value. So, instead of this (this still works):

render(<VacancySign hasVacancy />, document.getElementById('root'));

Do this:

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

If you're using the former syntax, make sure to update your propTypes to make hasVacancy not required; otherwise, you are free to restrict it with isRequired:

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

Solution 3:

To those of you who received the warning

warning.js?6327:33 Warning: Received `true` for a non-boolean attribute `editable`

This happens if you pass the props down without taking the boolean values out of the props.

E.g.:

const X = props => props.editable ? <input { ...props } /> : <div { ...props } />

This can be circumvented by

const X = ({ editable, ...props }) => editable ? <input { ...props } /> : <div { ...props } />