react-transition-group CSSTransition, conditional with null - reactjs

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;
}

Answer 1

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>