javascript - Warning with React Bootstrap tooltip: Received `true` for a non-boolean attribute `show` - Stack Overflow

admin管理员组

文章数量:1406177

I'm getting mad from that. I would like to get rid of that warning:

index.js:1446 Warning: Received true for a non-boolean attribute show.

If you want to write it to the DOM, pass a string instead: show="true" or show={value.toString()}. in div (created by Tooltip)

I'm making a validation form for registrating users. I show tooltip, when password validation fails - when passwords in two inputs are different.

I have attatchRefs in the constructor: this.attachRefPass = targetPass => this.setState({ targetPass });

Next, between other begin values in constructor:

this.state = {
 [...] 
      password: "",
      password2: "",
      showTooltipPass: false,
[...]
}

Validation method:

 passwordValidation = () => {
    this.setState({
      showTooltipPass: this.state.password === this.state.password2
    });
  };

And the Form and Tooltip ponents:

<Form.Group as={Col} controlId="formGridUsername">
                <Form.Label>Username</Form.Label>
                <Form.Control
                  required
                  name="username"
                  placeholder="Username"
                  onChange={this.onChangeUsername}
                  ref={this.attachRefUser}
                />
                <Overlay
                  target={targetUser}
                  show={showTooltipUser}
                  placement="right"
                >
                  {props => (
                    <Tooltip id="overlay-example" {...props}>
                      There is one username like that already in the system!
                    </Tooltip>
                  )}
                </Overlay>
              </Form.Group>

The Tooltip is from react-boostrap: /

I'm getting mad from that. I would like to get rid of that warning:

index.js:1446 Warning: Received true for a non-boolean attribute show.

If you want to write it to the DOM, pass a string instead: show="true" or show={value.toString()}. in div (created by Tooltip)

I'm making a validation form for registrating users. I show tooltip, when password validation fails - when passwords in two inputs are different.

I have attatchRefs in the constructor: this.attachRefPass = targetPass => this.setState({ targetPass });

Next, between other begin values in constructor:

this.state = {
 [...] 
      password: "",
      password2: "",
      showTooltipPass: false,
[...]
}

Validation method:

 passwordValidation = () => {
    this.setState({
      showTooltipPass: this.state.password === this.state.password2
    });
  };

And the Form and Tooltip ponents:

<Form.Group as={Col} controlId="formGridUsername">
                <Form.Label>Username</Form.Label>
                <Form.Control
                  required
                  name="username"
                  placeholder="Username"
                  onChange={this.onChangeUsername}
                  ref={this.attachRefUser}
                />
                <Overlay
                  target={targetUser}
                  show={showTooltipUser}
                  placement="right"
                >
                  {props => (
                    <Tooltip id="overlay-example" {...props}>
                      There is one username like that already in the system!
                    </Tooltip>
                  )}
                </Overlay>
              </Form.Group>

The Tooltip is from react-boostrap: https://react-bootstrap.github.io/ponents/overlays/

• javascript
• reactjs
• tooltip
• warnings

Share Improve this question Follow asked Jun 8, 2019 at 12:39 kubwoszkubwosz 12111 silver badge88 bronze badges 2

• It seems like in line show={showTooltipUser} your showTooltipUser is a boolean value. Try passing some dummy string instead of showTooltipUser (i:e show={"lorem"}) and see if the warning es up or not. – random Commented Jun 8, 2019 at 12:49
• Unluckily it doesnt work, get the same error as I described @helloitsjoe below. It wants a boolean :< – kubwosz Commented Jun 8, 2019 at 14:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It is the bug that was fixed that Overlay outputs show value as Boolean
You may fix the issue localy with overriding show prop

{props => (
    <Tooltip id="overlay-example" {...props} show={props.show.toString()}>
        There is one username like that already in the system!
    </Tooltip>
)}    

You are setting a Boolean value (true or false) in state.showTooltipPass, and passing it to Overlay’s show prop, which appears to expect a string value (”true” or ”false”).

If you pass the value in as show={showTooltipPass.toString()}, this will convert the boolean to a string in the place you need it to be a string.

本文标签： javascriptWarning with React Bootstrap tooltip Received true for a nonboolean attribute showStack Overflow