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

Even though I have applied propType validation, my editor throws an error on when passing boolean value for the hasvacancy prop. Here is what I'm seeing:

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

I know I am passing a string type value for 'hasvacancy' prop but what do I need to do so I can pass a boolean or other data types via the prop.

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'));

You should enclose the boolean value in {}:

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

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
}

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 } />