Fixed Bug: Warning: Received `true` for a non-boolean attribute disabled (React) issue

Blogger Maotouhu () takes you to Go to New World?

Blog homepage:

Maotouhu’s blog
“Complete Column of Interview Questions” Articles with pictures and texts Vivid images Simple and easy to learn! Everyone is welcome to step in~
“IDEA Development Cheats Column” Learn the common operations of IDEA and double your work efficiency~
“Master Golang in 100 Days (Basic Introduction)” Learn the Golang language, play cloud native, and travel to large and small factories~

I hope this article can bring you some help The article is superficial, please criticize and correct me!

Article directory

“Bug: Warning: Received `true` for a non-boolean attribute ‘disabled’ (React) problem solved”
- Summary
- introduction
- text
- - Problem statement
  - - warning message
  - What caused the error
  - - Wrong attribute passed
  - solution
  - - Correct attribute value
    - code demo
  - Precaution
  - - type checking
    - code review
    - automated test
- Summarize
- References
Original statement

《Bug: Warning: Received `true` for a non-boolean attribute disabled’ (React) problem solved》

Abstract

Hello everyone, this is your old friend the cat head tiger blogger! Today, we are going to talk about a common warning in React that will startle you in the console, like a sudden cat jump! This warning is usually caused by mismatched property types. Don’t worry, we will find out the cause together and fix this small front-end bug. Let’s dive into the world of code and find the solution to this little thorny problem!

Introduction

During the development of React, we often encounter some confusing warning messages. They are like the warning sounds of cats, reminding us to pay attention to small problems in the code. The warning we are going to discuss today will not affect functionality, but solving it can make our code more perfect.

Text

Explanation of the problem

Warning message

Warnings typically appear as follows:

Warning: Received `true` for a non-boolean attribute 'disabled'.

This means that we mistakenly passed a non-boolean value to a boolean property in our React component.

Cause of error

Incorrect attribute transfer

In React, when we want to disable a button, we usually write:

<button disabled="true">Click me!</button>

However, disabled should be a boolean property, it only needs to know whether it is true or false, no string required.

Solution

Correct attribute values

The correct thing to do is to pass the boolean value directly, not the string:

<button disabled={true}>Click me!</button>

Or, if you’re using it in conditional rendering, make sure the conditional expression evaluates to a boolean:

<button disabled={isButtonDisabled}>Click me!</button>

Where isButtonDisabled is a Boolean type state.

Code demonstration

Here’s an example involving stateful and conditional rendering, which correctly handles the disabled attribute:

import React, { useState } from 'react';

function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <div>
      <button disabled={isDisabled} onClick={() => setIsDisabled(true)}>
        Click me!
      </button>
    </div>
  );
}

export default App;

Preventive measures

Type checking

Use PropTypes or TypeScript for type checking to ensure all properties are passed the correct type.

Code review

Regular code reviews can help team members identify and correct such problems.

Automated testing

Write test cases to check whether properties are passed as expected.

Summary

This React warning is a minor issue, but it reminds us of the importance of types in front-end development. Passing property types correctly not only avoids warnings, but also makes your code more readable and robust. Just like an owl always lands exactly on its feet, our code should be as flawless as possible.

Reference materials

React official documentation
PropTypesDocumentation
TypeScript official manual

I hope you enjoyed this blog about resolving React warnings. If you have other solutions or ideas, remember to tell me in the comment area! Meow, see you next time! ?

Maotouhu recommends a list of necessary technology stacks for programmers:

Front-end technology Frontend:

Basic Technology:
- HTML5
- CSS3 (and preprocessors such as Sass, Less)
- JavaScript (ES6+)
Front-end frameworks and libraries:
- React
- ? Angular
- ?Vue.js
- Svelte
Status Management:
- Redux (usually used with React)
- MobX
- ? NgRx (for Angular)
- ?Vuex (for Vue)
Tools and Build Systems:
- ?Webpack
- Rollup
- Parcel
- Babel (for JavaScript transpilation)
Package Manager:
- npm
- Yarn
Route management:
- React-Router (for React)
- ? Angular Router
- ?Vue Router
API and Communications:
- Fetch API
- Axios
- GraphQL (and related clients like Apollo and Relay)
Style and Component Library:
- Styled Components
- Ant Design
- Bootstrap
- ?Material-UI
Test Tools:
- Jest
- Mocha
- Cypress (for end-to-end testing)
- Enzyme, Testing Library
Version Control:

Git (and GitHub, GitLab, Bitbucket)

Code Formatting and Quality Check:

? ESLint
Prettier

Performance optimization and monitoring:

?Lighthouse
Web Vitals
Google Analytics

Cross-platform mobile development:

React Native
?Vue Native

Original statement

======= ·

Original author: Maotouhu
Editor: Libin9iOak

Author wx: [libin9iOak]
Public account: Maotouhu technical team

Study	Review
?	?

This article is an original article and the copyright belongs to the author. Reprinting, duplication or quotation without permission is prohibited.

The author guarantees the authenticity and reliability of the information,but does not assume responsibility for its accuracy or completeness.

Commercial use without permission is prohibited.

If you have questions or suggestions, please contact the author.

Thank you for your support and respect.

Click on the business card below to join the IT technology core learning team. Explore the future of technology together and grow together.