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

Question

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

score 138 · Accepted Answer · answered Sep 05 '16 at 08:21

138

You should enclose the boolean value in {}:

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

answered Sep 05 '16 at 08:21

JFAP

3,617
1
24
25

And the same rule goes when we pass integer or float value . RIght ?? – Vishnu Shekhawat Sep 05 '16 at 08:23
3

@VishnuShekhawat anything wrapped in `"` or `'` would be sent as a string. If you want to keep the value type, such as an integer, float, boolean, object, etc, you would need to wrap it in `{}`. – Chris Sep 05 '16 at 08:54
2

returns `Warning: Received `false` for a non-boolean attribute `static`.` for me – Tom Apr 29 '18 at 23:28
I think it's better to set defaultProp 'hasvacancy' as false and just set the property like – tommyalvarez May 11 '18 at 12:14

Artif3x · Answer 2 · 2020-04-06T14:36:24.833

45

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
}

edited Apr 06 '20 at 14:36

answered May 02 '17 at 15:55

Artif3x

4,391
1
28
24

This short form is much more concise – Mostafa Armandi Oct 07 '17 at 14:07
6

This shows a warning in console: ```warning.js?6327:33 Warning: Received `true` for a non-boolean attribute `editable`.``` – Tom Apr 29 '18 at 23:31
@Tom It looks like your PropType is incorrectly set. The error message is saying you're receiving a boolean value (good) for a non-boolean attribute "editable" (bad). Make sure your PropType is React.PropTypes.bool, and not React.PropTypes.string, or something else. – Artif3x Aug 29 '18 at 19:46
@Artif3x it's been a while but I remember that in my case either `editable` is a html attribute of a native component like `textarea`, or I had not set prop types at all (in which case it shouldn't be a string either, right?) – Tom Aug 29 '18 at 23:08
1

@Tom The "editable" attribute is of type String, not Boolean. Remember, "editable" can be "true", "false" or "inherit", so assigning it a boolean value will be invalid. Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable – Artif3x Sep 04 '18 at 14:45
This answer shows an alternative way of passing boolean props values, but it doesn't explain when/why it should be preferred. "Don't try to pass Boolean values as attribute values" Why? Also: what if the boolean value is dynamic? – leonbloy Mar 22 '20 at 21:22
Furthermore, what if the declared default value of `hasVacancy` is true? – leonbloy Mar 25 '20 at 14:04
This is _not_ what the React official docs recommends: https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true – leonbloy Mar 25 '20 at 17:12

score 10 · Answer 3 · answered Feb 23 '19 at 22:18

10

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

answered Feb 23 '19 at 22:18

Arwed Mett

2,614
1
22
35

This is the real answer. You can also change true = +true or make true to a numerical value because JS is awesome but not taking the value out of props really gives this error. Thanks for explanation! – Shnigi Dec 28 '20 at 14:34

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

3 Answers3

Linked