Linked Questions

Popular Questions

I have a react component and some part of the component and that part is only rendered conditionally. When I click on a visible part of the component(button), it called the state change and renders the hidden parts. Now I want to fade in that hidden part instead of just show instantly. Is there any way to do that only with CSS and without using any external library like CSSTranstionGroup? Thank you for your help.

import React, { Component } from "react";

export default class Parent extends Component {
  state = {
    showForm: false
  };

  render() {
    const { showForm } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ showForm: true })}>
          Fade in form on click
        </button>
    {showForm && (
      <div>
        <h2>
           This part needs to be fade in once the **showForm** is true
         </h2>
        <form></form>
      </div>
        )}
      </div>
    );
  }
}

Related Questions