If you want to write it to the DOM, pass a string instead: in="true" ...

import React, { Component } from 'react';
import { Button,Alert, Card, CardBody, CardFooter, Col, Container, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
import {forgot_password} from "../../../hooks/functions";
import {Link} from "react-router-dom";

class ForgotPassword extends Component {
  constructor(){
    super();
    this.state = {
      loading: false,
      warningMessage:"",
      visible:false
    };
    this.onForgotPassword=this.onForgotPassword.bind(this);

    this.onDismiss = this.onDismiss.bind(this);
  }
  onDismiss() {
    this.setState({ visible: false });
  }
  onForgotPassword=(e)=>{
    e.preventDefault();
    let {email}=e.target;
    this.setState({
      loading:true
    });
    forgot_password({email:email.value})
      .then(data=>{
          this.setState({
            loading:false,
            visible:true,
            warningMessage:data.message
          });
      })
  };
  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="6">
              <Card className="mx-4">
                <CardBody className="p-4">
                  <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
                    {this.state.warningMessage}
                  </Alert>
                  <Form onSubmit={this.onForgotPassword}>
                    <h1>Forgot Password</h1>
                    <p className="text-muted">Enter your email to reset password</p>
                    <InputGroup className="mb-3">
                      <InputGroupAddon addonType="prepend">
                        <InputGroupText>@</InputGroupText>
                      </InputGroupAddon>
                      <Input type="text" placeholder="Email" autoComplete="email" name={"email"}/>
                    </InputGroup>
                    <Button color="success" block>Reset Password</Button>
                    <Link to={"/login"} color="success" block>Back to Login</Link>
                  </Form>
                </CardBody>
              </Card>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}
export default ForgotPassword;

I am getting the same warning and this the code.

Thank you all! I’m learning ReactJS and ended here searching for a solution.

I changed from: color={withDraw} to: color={withDraw ? 1 : 0}

and it works!