How can I add animation to react state

I just want to add a fade in animation to next index. i found a package called “react transition group” but all tutorials were based on class components or redux I didn’t understand anything.

const AboutTestimonials = () => {
  const [index, setIndex] = useState<any>(0);
  const [data] = useState(AddTestimonial);
  const current = data[index];

  return (
    <div className="testimonials__container">
      <div className="testimonials__description">
        <h3>TESTIMONIALS</h3>
        <p>{current.quote}</p>
        <h5 className="author__testimonials">{current.postedby}</h5>
        <h6 className="job__testimonials">{current.profession}</h6>
      </div>
      <div className="testimonials__pagination">
        <Image
          src={leftarrow}
          alt="arrow"
          onClick={() => setIndex(index > 0 ? index - 1 : index)}
          className="pagination__arrows"
        />
        <p>{index + 1} / 5</p>
        <Image
          src={rightarrow}
          alt="arrow"
          onClick={() => setIndex(index < 4 ? index + 1 : index)}
          className="pagination__arrows"
        />
      </div>

Answer

SwitchTransition waits for the old child to exit then render the new child as mentioned in the react transition group website.
there are two modes:

1. in-out
2. out-in

the important factor is changing the key prop of the child component.child component could be CSSTransition or Transition.if you want the transition changes simultaneously you can use the TransitionGroup.

side note: if you want to use the AddTestimonial in your component and you don’t want to change the state (I noticed there is no second argument for setting the data), there is no need to declare a useState.it is much better to set AddTestimonial as a prop on AboutTestimonials component

import { CSSTransition, SwitchTransition } from 'react-transition-group';
const AboutTestimonials = () => {
  const [index, setIndex] = useState<any>(0);
  const [data] = useState(AddTestimonial);
  const current = data[index];

  return (
    <div className="testimonials__container">
      <div className="testimonials__description">
        <h3>TESTIMONIALS</h3>
        <SwitchTransition mode={'out-in'} >
         <CSSTransition
           key={index}
           timeout={300}
           classNames="fade"
           >
          <>
           <p>{current.quote}</p>
           <h5 className="author__testimonials">{current.postedby}</h5>
           <h6 className="job__testimonials">{current.profession}</h6>
          </>
         </CSSTransition> 
       </SwitchTransition>
      </div>
      <div className="testimonials__pagination">
        <Image
          src={leftarrow}
          alt="arrow"
          onClick={() => setIndex(index > 0 ? index - 1 : index)}
          className="pagination__arrows"
        />
        <p>{index + 1} / 5</p>
        <Image
          src={rightarrow}
          alt="arrow"
          onClick={() => setIndex(index < 4 ? index + 1 : index)}
          className="pagination__arrows"
        />
      </div>
)}

css:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}