Add fade-in animation to a list element in React

Question

I have the following code that display a table's data from Laravel using axios in React.

The data is displayed in real time. How can I add a fade-in animation each time a new element is added? https://socket.io/ shows exactly what I want to do in the example on the right.

Note that the element in the li tag is added from an event that is fired up from a creation controller.

The component:

import React,{Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import Echo from "laravel-echo";
 
class Patient extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            patients : [],
        };
    }

        componentDidMount() {
            axios.get('api/patients')
            .then(response => {this.setState({patients: response.data})})
            .catch(err => console.log(err));
            
            window.Echo.channel('home')
                .listen('NewPatient', newPatientData => {
                    this.setState({
                        patients: this.state.patients.concat(newPatientData)
                    })
                }, e => {
                    console.log("Error", e)
                })
        }

        render() {
          return (
            <div>

<ul> { this.state.patients.slice(0).reverse().map(patient => <li>{patient.nom}</li>)} </ul>

            </div>
          )
        }
      }

export default Patient;

Answer 1

You can do this pretty easily with CSS animations. I've created an example below for you and if you check out the CSS, you'll see the keyframe animation which is then used by the .fadeIn selector and that class is then applied to the <li> element.

https://codesandbox.io/s/dreamy-frog-r6sr8?file=/src/styles.css