Below is a simple example that demonstrates how to create a collapsible component in React:

const collapsible = ({active, toggle}) =>
<div>
  <button type="button" onClick={toggle}>Toggle</button>
  <div className={'collapsible' + (active? ' active': '')}>
    text
  </div>
</div>


const component = React.createClass({
  getInitialState() {
    return {active: false}
  },
  toggle() {
    this.setState({active: !this.state.active})
  },
  render() {
    return collapsible({active: this.state.active, toggle: this.toggle})
  }
})
ReactDOM.render(React.createElement(component), document.querySelector('#root'))

.collapsible {
  height: 1.5rem;
  transition: height 0.25s linear;
  background: #333;
  border-radius: 0.25rem
}
.collapsible.active {
  height: 7rem
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>

The collapsible view smoothly transitions between "shrink" and "expand" states using CSS transitions triggered by changing CSS properties.

In order to control CSS properties with React, state changes are reflected in property values or the className attribute within the render() method.

In this specific case, the .active class affects the height value, which is controlled by state.active. The class is toggled by React in response to state changes, triggering the CSS transition effect.

To achieve smoother transitions, refer to this informative article.

Instead of showing two different states of a component based on conditions, you can opt to toggle the class on the same component. Active and collapsed classes can be used like this:

For instance:

.active{
  -webkit-transition: -webkit-transform .5s linear;  // transition duration of 
                                                     // 0.5 seconds
  height: 200px;
}

.collapsed{
  height: 0px;
}

Take a look at this resource for demonstrations

To achieve smooth transitions, a popular method is to utilize CSSTransitionGroup from the react-transition-group library. It's a straightforward process - simply enclose your component within the CSSTransitionGroup tags and specify enter and leave timeouts as needed:

<CSSTransitionGroup
      transitionName="example"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>
      {items}
</CSSTransitionGroup>

The v1-stable documentation explains:

"When a new item is added to CSSTransitionGroup, it will receive the example-enter CSS class and the example-enter-active CSS class in the subsequent tick."

Be sure to apply appropriate styling to these CSS classes for the desired animation effect.

For more insights, refer to the React documentation on animations.

Additionally, there are various third-party components available for creating dynamic animations.

Another way to tackle this scenario could involve switching state after the animation is finished. This method allows you to not only apply transitions but also any other actions you desire (such as JavaScript animations or SMIL). Just remember to include an end callback at the appropriate time :)

Here's a live example on CodePen

Below is the code snippet for reference:

const runCustomAnimation = (node, {property = 'opacity', from, to, duration = 600, post = ''}, end) => {
  const difference = to - from;
  const startingTime = Date.now();

  const animateFrame = ()=>{
    const currentTime = Date.now() - startingTime;
    if (currentTime >= duration) {
      node.style[property] = to + post;
      return typeof end == 'function' && end();
    }

    const value = from + (difference * (currentTime/duration));
    node.style[property] =  value + post;
    requestAnimationFrame(animateFrame);
  }

  requestAnimationFrame(animateFrame);

}

class CustomComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isHidden: false
    }

    this.handleClick = (e)=>{
       this.hideElement(e.currentTarget,()=>{
         this.setState({isHidden: !this.state.isHidden})
       });
     };

    this.setReference = (n)=>{
       n && this.showElement(n);
     };
  }

  render() {
    if (this.state.isHidden){
         return this.renderCollapsedState();
      }
      return this.renderActiveState()
  }

  renderCollapsedState() {
    return (
      <div 
        key='b'
        style={{opacity: 0}}
        ref={this.setReference}
        className={`b`}
        onClick={this.handleClick}>
          <h2>I'm Collapsed</h2>
      </div>
      )
  }

  renderActiveState() {
    return (
      <div 
        key='a'
        style={{opacity: 0}}
        ref={this.setReference}
        className={`a`}
        onClick={this.handleClick}>
          <h2>I'm Active</h2>
      </div>
      )
  }

  showElement(node, cb)  {
    runCustomAnimation(node, {from: 0, to: 1}, cb);
  }

  hideElement(node, cb) {
    runCustomAnimation(node, {from: 1, to: 0}, cb);
  }

}

ReactDOM.render(<CustomComponent />, document.getElementById('content'));

To ensure the success of this approach, rely solely on state rather than props within your Component. If necessary, make adjustments in the componentWillReceiveProps method when dealing with props.

Updated Version

Check out the updated Codepen link for a clearer demonstration highlighting the advantages of this technique. The transition has been converted into a JavaScript animation, eliminating the need for the transitionend event.

To display two different components, one for active and one for collapsed states, you can wrap them in a div that controls the height using CSS.

render: function(){
var state = this.props.isCollapsed() ? 'collapsed' : 'expanded';
return(
  <div className={state + ' container'}>
    {
      this.props.isCollapsed() ?
       this.renderCollapsedComponent() :
       this.renderActiveComponent()
    }
  </div>
);
}

Add these styles to your CSS file:

.container{
  transition: transform .5s linear;
}

.expanded{  
  height: 200px;
}

.collapsed{
  height: 20px;
}

To signify the active state, you can incorporate a class such as .active and switch this class when changing states.

Consider using the following CSS structure:

.your-component-name{
  // styles for inactive state
}

.your-component-name.active {
  // styles for active state
}

Check out this Toggle react component featuring the Velocity-React library, perfect for adding animations to transitions in React interfaces:

import React, { Component } from 'react';
import { VelocityTransitionGroup } from 'velocity-react';

export default class TogglingContainer extends Component {
    constructor () {
        super();

        this.renderContent = this.renderContent.bind(this);
    }

    renderContent () {
        if (this.props.show) {
            return (
                <div className="toggle-container-holder">
                    {this.props.children}
                </div>
            );
        }
        return null
    }

    render () {
        return (
            <div>
                <h2 className="toggling-container-heading" onClick={this.props.toggle}>{this.props.title}</h2>
                <VelocityTransitionGroup component="div" enter="slideDown" leave="slideUp">
                    {this.renderContent()}
                </VelocityTransitionGroup>
            </div>
        );
    }

};

TogglingContainer.propTypes = {
    show: React.PropTypes.bool,
    title: React.PropTypes.string.isRequired,
    toggle: React.PropTypes.func.isRequired,
};

Trust this information proves beneficial!