如何每隔X秒更改状态

Question

I need to change the name of every avatar every X seconds, I have follow this solution and it works fine but, right now its changing all the names to the same name from RandomAcidName array.

I imagine that I need to iterate through this list also, so each name is passing just once to every avatar.

Here is my code

nameJuggler is passing the name to each avatar

import React, { Component } from "react";
import "./Avatar.scss";
import AcidData from "../Acidsdata/Acids-data.json";
import RandomAcidName from "../../../src/randomAcidName.json";

const getDate = new Date();
const getDay = getDate.getDate();
const getMonth = getDate.getMonth() + 1;
const fullTodayDate = getDay + "/" + getMonth;

const AvatarDisplay = props => {
  return (
    <div key={props.id} className="container__position-relative">
      <img src={props.photo} alt={props.name} className="avatar__img" />
      <div className="container__position-absolute avatar__name">
        <span>{props.name}</span>
      </div>
      {props.cumple}
    </div>
  );
};

class AcidPoblation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sudoNameId: 0,
      acidos: AcidData,
      randomName: RandomAcidName
    };
  }

  componentDidMount() {
    this.changeName = setInterval(() => {
      let currentSudoNameId = this.state.sudoNameId;

      this.setState({
        sudoNameId: currentSudoNameId + 1
      });
    }, 1500);
  }

  componentDidUnmount() {
    clearInterval(this.changeName);
  }

  render() {
    let nameJuggler =
      RandomAcidName[this.state.sudoNameId % RandomAcidName.length];

    return (
      <main className="container__grid">
        {this.state.acidos.map(item => (
          <AvatarDisplay
            photo={item.acidphoto}
            name={nameJuggler}
            birth={item.birthdate}
            id={item.acidid}
            cumple={
              item.birthdate === fullTodayDate ? (
                <img
                  src="https://via.placeholder.com/40x40"
                  alt="feliz cumpleaños"
                  className="container__position-absolute avatar__birth-date"
                />
              ) : null
            }
          />
        ))}
      </main>
    );
  }
}

export default AcidPoblation;

Here is the Json with the names

[

  "Anderson",
  "Ashwoon",
  "Aikin",
  "Bateman",
  "Bongard",
  "Bowers",
  "Boyd",
  "Cannon",
  "Cast",
  "Deitz",
  "Dewalt",
  "Ebner",
  "Frick",
  "Hancock",
  "Haworth",
  "Hesch",
  "Hoffman",
  "Kassing",
  "Knutson",
  "Lawless",
  "Lawicki",
  "Mccord",
  "McCormack",
  "Miller",
  "Myers",
  "Nugent",
  "Ortiz",
  "Orwig",
  "Ory",
  "Paiser",
  "Pak",
  "Pettigrew",
  "Quinn",
  "Quizoz",
  "Ramachandran",
  "Resnick",
  "Sagar",
  "Schickowski",
  "Schiebel",
  "Sellon",
  "Severson",
  "Shaffer",
  "Solberg",
  "Soloman",
  "Sonderling",
  "Soukup",
  "Soulis",
  "Stahl",
  "Sweeney",
  "Tandy",
  "Trebil",
  "Trusela",
  "Trussel",
  "Turco",
  "Uddin",
  "Uflan",
  "Ulrich",
  "Upson",
  "Vader",
  "Vail",
  "Valente",
  "Van Zandt",
  "Vanderpoel",
  "Ventotla",
  "Vogal",
  "Wagle",
  "Wagner",
  "Wakefield",
  "Weinstein",
  "Weiss",
  "Woo",
  "Yang",
  "Yates",
  "Yocum",
  "Zeaser",
  "Zeller",
  "Ziegler",
  "Bauer",
  "Baxster",
  "Casal",
  "Cataldi",
  "Caswell",
  "Celedon",
  "Chambers",
  "Chapman",
  "Christensen",
  "Darnell",
  "Davidson",
  "Davis",
  "DeLorenzo",
  "Dinkins",
  "Doran",
  "Dugelman",
  "Dugan",
  "Duffman",
  "Eastman",
  "Ferro",
  "Ferry",
  "Fletcher",
  "Fietzer",
  "Hylan",
  "Hydinger",
  "Illingsworth",
  "Ingram",
  "Irwin",
  "Jagtap",
  "Jenson",
  "Johnson",
  "Johnsen",
  "Jones",
  "Jurgenson",
  "Kalleg",
  "Kaskel",
  "Keller",
  "Leisinger",
  "LePage",
  "Lewis",
  "Linde",
  "Lulloff",
  "Maki",
  "Martin",
  "McGinnis",
  "Mills",
  "Moody",
  "Moore",
  "Napier",
  "Nelson",
  "Norquist",
  "Nuttle",
  "Olson",
  "Ostrander",
  "Reamer",
  "Reardon",
  "Reyes",
  "Rice",
  "Ripka",
  "Roberts",
  "Rogers",
  "Root",
  "Sandstrom",
  "Sawyer",
  "Schlicht",
  "Schmitt",
  "Schwager",
  "Schutz",
  "Schuster",
  "Tapia",
  "Thompson",
  "Tiernan",
  "Tisler"

]

I need that every name is assing just once.

In this link is a replica of my project...

Answer 1

The problem is

let nameJuggler = [this.state.sudoNameId % RandomAcidName.length];

this.state.sudoNameId won't be unique because it's just a number set in the parent component and will be provided to all of the AvatarDisplays not dynamically changing. An easy fix would just make the .map also have an index so you can add the index to the this.state.sudoNameId which will make each number unique. See code below

    return (
      <main className="container__grid">
        {this.state.acidos.map((item, index) => {
            let nameJuggler =
            RandomAcidName[(this.state.sudoNameId + index) % RandomAcidName.length];
          return (
          <AvatarDisplay
            photo={item.acidphoto}
            name={nameJuggler}
            birth={item.birthdate}
            id={item.acidid}
            cumple={
              item.birthdate === fullTodayDate ? (
                <img
                  src="https://via.placeholder.com/40x40"
                  alt="feliz cumpleaños"
                  className="container__position-absolute avatar__birth-date"
                />
              ) : null
            }
          />
        )
        })}
      </main>