Want to present each time the values I have reached

Question

Hello everyone I have such a problem:

I want at any given time, to present the current result. For example after a second, I want to display 60, after 2.5 seconds I want to display 85 and so these ...

I also want to display in the first second an array of 60 followed by a lot of zeros, because to the values after 60 I have not yet reached. And after 2.5 seconds you want to display such an array:

[60,85,0,0,0,0,0,0,0,0,0]

Because what after 85 I have not reached it yet

import React, { useEffect, useState } from "react";
import "./styles.css";

const Rep = {
  TimeMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
  ScoreMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20]
};
let i = 0;

export default function App() {
  const [time, setTime] = useState("");
  const [totalScore, setTotalScore] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setTime(Rep.ScoreMove[i]);
      i++;
    }, Rep.TimeMove[i] * 1000);
  }, [time]);

  return 
    <div className="App">
      {time}
      {totalScore}
    </div>;
}

I was unable to present the array of values I had reached

I have the Array ScoreMove, I want to return it until the last number I arrived, and all the other numbers will be 0. ; I could not return such an array — dust

Akhil Akhil · Accepted Answer · 2021-06-01T17:04:27

Storing just the index value will be sufficient. Because all your other values can be easily derived.

You start with currentIndex = -1.

So there won't be any score displayed at the start as array[-1] === undefined and you wait for 1sec (currentIndex + 1) = (-1 + 1) => 0 index of TimeMove array

Then your currentIndex will be 0 as you are increasing your index in useEffect

score will be ScoreMove[0] => 60

time waiting will be (currentIndex + 1) = (0 + 1) => 1 index of TimeMove array = 2.5sec

and so-on ...

And for the array calculation

You slice your ScoreMove array from 0 to currentIndex + 1, then for the rest of the array you concat an array with remaining length using => Array(lengthLeftToFill).fill(0)

Note: You can run the below code

const { useState, useEffect } = React;

const Rep = {
  TimeMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
  ScoreMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
};

const totalLength = Rep.TimeMove.length;

function App() {
  const [currentIndex, setCurrentIndex] = useState(-1);

  useEffect(() => {
    setTimeout(() => {
      setCurrentIndex((prev) => Math.min(prev + 1, totalLength - 1));
    }, Rep.TimeMove[currentIndex + 1] * 1000);
  }, [currentIndex]);

  const waitingTimeForNext =  Rep.TimeMove[currentIndex + 1];
  const currentScore = Rep.ScoreMove[currentIndex];
  
  
  const answer = Rep.ScoreMove.slice(0, currentIndex + 1).concat(
    Array(totalLength - currentIndex - 1).fill(0)
  );
  
 
  return (
    <div className="App">
      <p>{`Waiting for: ${waitingTimeForNext || "-"}`}</p>
      <p>{`Current Score: ${currentScore}`}</p>
      <p>{`Answer = ${JSON.stringify(answer, null, 2)}`}</p>
    </div>
  );
}


ReactDOM.render( 
  <App / >,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Want to present each time the values I have reached

1 Answers