Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
<Input invalid> Warning: Received `true` for a non-boolean attribute `valid`.
See original GitHub issueComponent: Input
Dependencies:
"dependencies": {
"bootstrap": "^4.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-icons": "^2.2.7",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.0",
"react-select": "^1.2.1",
"reactstrap": "^5.0.0-beta",
"redux": "^3.7.2"
},
Running the form example code from the component page:
import React from 'react';
import { Form, FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
export default class Example extends React.Component {
render() {
return (
<Form>
<FormGroup>
<Label for="exampleEmail">Input wihtout validation</Label>
<Input />
<FormFeedback>You will not be able to see this</FormFeedback>
<FormText>Example help text that remains unchanged.</FormText>
</FormGroup>
<FormGroup>
<Label for="exampleEmail">Valid input</Label>
<Input valid />
<FormFeedback valid>Sweet! that name is available</FormFeedback>
<FormText>Example help text that remains unchanged.</FormText>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Invalid input</Label>
<Input invalid />
<FormFeedback>Oh noes! that name is already taken</FormFeedback>
<FormText>Example help text that remains unchanged.</FormText>
</FormGroup>
</Form>
);
}
}
and get the error:
Warning: Received `true` for a non-boolean attribute `valid`.
If you want to write it to the DOM, pass a string instead: valid="true" or valid={value.toString()}.
in div (created by FormFeedback)
in FormFeedback (at Example.jsx:17)
in div (created by FormGroup)
in FormGroup (at Example.jsx:14)
in form (created by Form)
in Form (at Example.jsx:7)
in Example (at SimpleNumericInput.jsx:112)
in div (created by Row)
in Row (at SimpleNumericInput.jsx:111)
in div (at SimpleNumericInput.jsx:63)
in SimpleNumericInput (at NewPatient.jsx:104)
in div (at SimpleQuestionWrapper.jsx:22)
in div (at SimpleQuestionWrapper.jsx:20)
in SimpleQuestionWrapper (at NewPatient.jsx:51)
in Route (at NewPatient.jsx:50)
in Switch (at NewPatient.jsx:83)
in div (created by Container)
in Container (at NewPatient.jsx:73)
in NewPatient (created by Connect(NewPatient))
in Connect(NewPatient) (created by Route)
in Route (at PatientSubLayout.jsx:12)
in Switch (at PatientSubLayout.jsx:11)
in PatientSubLayout (created by Route)
in Route (at Routes.jsx:16)
in Switch (at Routes.jsx:12)
in Routes (at App.js:14)
in Router (at App.js:13)
in App (created by Connect(App))
in Connect(App) (at index.js:26)
in Provider (at index.js:25)
Issue Analytics
- State:
- Created 6 years ago
- Reactions:3
- Comments:7 (1 by maintainers)
Top Results From Across the Web
Warning: Received `false` for a non-boolean attribute. How do ...
How do I pass a boolean in a custom attribute for React? I'm using styled-components and passing the attribute through the component. Here...
Read more >How to fix the 'Received "true" for a non-boolean attribute' error
I'll present an alternative to this solution. The trick is to use the unary plus operator to convert boolean to number. before your...
Read more >How to Fix ' Received false for non-boolean attribute' Errors
Learn what is the root cause, and how to fix 'Warning: Received false for a non-boolean attribute className.' warnings in React.
Read more >FAQs - styled-components
Note: The subfunction object-form .attrs({ prop: props => {} }) syntax that was deprecated in v4 is ... Warning: Received "true" for a...
Read more >styled-jsx - npm
js:527 Warning: Received `true` for a non-boolean attribute `jsx`. The styled-jsx/babel-test solves this problem. It simply strips jsx ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
“If you want to write it to the DOM, pass a string instead: invalid=“true” or invalid={value.toString()}.” on “reactstrap”: “^8.0.1” Please advice
I am having a same error import React, { Component } from ‘react’ import Newsitem from ‘./Newsitem’ export class News extends Component {
} export default News