0

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;
BronzeJamie
  • 61
  • 2
  • 10

1 Answers1

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
TechyTech
  • 455
  • 2
  • 13
  • Thank you very much ! Although when adding .slice(0).reverse(). next to map to invert the order of the display, the elements are still fading from the bottom up, can we invert this ? – BronzeJamie Mar 11 '21 at 04:26
  • See this code https://codesandbox.io/s/optimistic-wilbur-1mwdy – BronzeJamie Mar 11 '21 at 04:38