Reactjs: Fade-in data not working properly

Question

I have a button in App Component if i click in this button i get next item in array in the Component but the problem now the Fade-in Transition work only the fist item and not work's for the next item. how can i let Fade-in Transition work for next items?

My code:

import React, { Component } from 'react';
import FadeIn from 'react-fade-in';

class App extends Component {
  constructor(props){
    super(props);
    this.state={indexTeam:0}
  }

  nextTeam=() => {
     this.setState({ indexTeam: (this.state.indexTeam + 1) % teamList.length });
  };

  render() {
    const teams = teamList[this.state.indexTeam];
    return (
      <div>
       <FadeIn><h3>{teams.name}</h3></FadeIn>
       <br/>
       <button onClick={this.nextTeam}>Next Team</button>
      </div>
    );
  }
}

const teamList = [
  {
    name: "1- Manchester United"
  },
  {
    name: "2- Fc Barcelona"
  },
  {
    name: "3- Inter Milan"
  },
  {
    name: "4- Liverpool"
  }
];

export default App;

score 0 · Answer 1 · answered Jan 06 '19 at 21:01

Don't use that library. It does exactly that it should, fade in elements one by one when component (page in your case) mounts, but you need your transition on each rerender

If you will look through library that you are using (react-fade-in), you will notice that it reinits it's state on componentDidMount, so it doesn't work when you set state (so, just rerender it, not unmount and mount again).

I didn't come up with any fast solution how to fix or rewrite this library, so just think about yours.

Look through their realization (Which is simply based on css transition) and create your solution.

react-fade-in: https://github.com/gkaemmer/react-fade-in/blob/master/src/FadeIn.js

Reactjs: Fade-in data not working properly

1 Answers1