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

[gracefullight]

I got an error while rendering StackGrid Component's Opacity:0 style attribute does not change :cry:

I found a strange prop in the div element that render in the Grid Component.

and it comes GridItem Component

It looks like a react transition error :cry:

Appreciate any help! 🙏

[wadackel]

Hi @brendaniel, Thank you for your valuable report :+1:

If possible, it would be extremely helpful if you could provide reproducible minimal code!

[gracefullight]

@tsuyoshiwada I do not get an error after rebuilding with the same source, 😨 if there is an error again, I will upload code :+1:

[Gurjap]

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.

[Gurjap]

Solved the Problem by removing this block attribute from Link Tag <Link to={"/login"} color="success" block>Back to Login</Link> changed to <Link to={"/login"} color="success">Back to Login</Link>

[daydream05]

I'm having the same issue. Anyone else found a solution?

[Jezfx]

Also getting the same error in the console and all span elements are set to opacity: 0

import React from 'react';
import StackGrid, { transitions, easings } from 'react-stack-grid';

class GridLayout extends React.Component {

  render(): JSX.Element {
    const transition = transitions.scaleDown;

    return (
      <StackGrid
        monitorImagesLoaded={true}
        columnWidth={300}
        duration={600}
        gutterWidth={15}
        gutterHeight={15}
        easing={easings.cubicOut}
        appearDelay={60}
        appear={transition.appear}
        appeared={transition.appeared}
        enter={transition.enter}
        entered={transition.entered}
        leaved={transition.leaved}
      >
        <div key="key1"><h1>Item 1</h1></div>
        <div key="key2"><h1>Item 2</h1></div>
        <div key="key3"><h1>Item 3</h1></div>
      </StackGrid>
    );
  }
}

export default GridLayout;

[navedkhan012]

class StatementRow extends Component { render() { const { withDraw, background, ...props } = this.props return (

 **// Note: with error**  
**<StatementWrapper color={withDraw} background={background}>**
**// Note: after remove error** 
**<StatementWrapper color={withDraw ? 1 : 0} background={background}>**

<StatementWrapper color={withDraw ? 1 : 0} background={background}>

₹ 22,535 Credit withdrawn

    <Date>12th May</Date>
  </StatementWrapper>
)

} }

//color={withDraw} with error // color={withDraw ? 1 : 0} error remove afte add this condition this is working fine on my project hopefully it will help you same errror i got

[Silverium]

In my case, it was the cookies. Removed all cookies and all cached storage, and automagically Addons tab shows again!

[rogerpoliver]

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!

[Kang-Dayeon]

I solved it like this!! boolean type should be changed to string type ex) [component]

<TodoText completed={completedProps.toString()}>
    {todoItem.text}
</TodoText>

[styled-component]

const TodoText = styled.p<{ completed: string }>`
    font-size: 12px;
    padding: 0 10px;
    word-break: break-all;
    color: ${(props) => (props.completed === "true") ? '#999' : '#000'};
    text-decoration: ${(props) => (props.completed === "true") ? 'line-through' : 'none'} ;
`