react-transition-group CSSTransition, conditional with null

Question

Trying to get a simple fade in/out transition working.

I've tried moving the <CSSTransition> around into different areas to no avail. I'm using this successfully in another component that's mapping children but can't see why it wouldn't work in this case since I'm rendering it together with the child component, if the child gets returned at all.

Child component

const Error = (props) => {
  return (
    <CSSTransition timeout={400} classNames={errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  )
}

Parent component

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';

import type { InfoState } from './state';
import { closeError } from './actions';

const mapStateToProps = (state: {info: InfoState}) => ({
  info: state.info.data.info,
  infoError: state.info.infoError,
});

const mapDispatchToProps = dispatch => ({
  closeError: () => dispatch(closeError()),
});

class Parent extends Component<Props, State> {
  state = { info: this.props.info };

  handleChange = (e) => {
    this.setState({ info: e.target.value });
    this.props.closeError();
  }

  render() {
    if (this.props.info === null) {
      return (
        <div className="info-wrapper">
          <input
            type="text"
            value={this.state.info ? this.state.info : '' }
            onChange={this.handleChange}
          />
        </div>
        <div className="info-error">
          { this.props.infoError !== ''
            ? <Error 
                key={this.state.info} 
                errorString={this.props.infoError} 
              />
            : null
           }
        </div>
      )
    }
    return ( <div> things </div> )
  }
}

CSS

.errorTransition-enter {
  opacity: 0.01;
}
.errorTransition-enter-active {
  opacity: 1;
  transition: all 400ms ease-out;
}
.errorTransition-exit {
  opacity: 1;
}
.errorTransition-exit-active {
  opacity: 0.01;
  transition: all 400ms ease-out;
}

Are you sure that this condition: `this.props.infoError !== ' '` returns true? — ladyk, Mar 06 '19 at 18:48
so I think the case is you're not passing **'in'** parameter in CSSTransition, please look at the example: http://reactcommunity.org/react-transition-group/css-transition/#CSSTransition-prop-onEnter — ladyk, Mar 06 '19 at 19:21
@ladyk I tried that as well so I had `in={ props.errorString !== '' }` but no transition still — raccoon_nine, Mar 06 '19 at 19:27
Hm, is it possible to provide working codepen example with this part of your code? — ladyk, Mar 06 '19 at 19:30

score 1 · Accepted Answer · answered Mar 07 '19 at 08:50

I was having a similar issue with conditionally removing an element wrapped with <CSSTransition>. To solve the problem I wrapped the <CSSTransition> element with a <TransitionGroup> element and used its childFactory prop. The childFactory prop can be used like so:

  <TransitionGroup
     childFactory={child => React.cloneElement(child)}
  >
    <CSSTransition timeout={400} classNames={errorTransition}>
      <span> {props.errorString} </span>
    </CSSTransition>
  </TransitionGroup>

react-transition-group CSSTransition, conditional with null

1 Answers1