Question 295111 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – State increasing +40 instead of +20

I want to increase each item in sliderValues +20 when clicking Increase Volume.

import React, { useState, useRef } from 'react';

export const App = ({ name }) => {
  const [sliderValues, setSliderValues] = useState([50, 50, 50, 50, 50]); // Initial slider values

  const audios = [
    { src: '/fire.mp3', icon: '\f06d' },
    { src: '/crickets.mp3', icon: '\e4d0' },
  ];

  const increaseVolume = () => {
    audios.forEach((audioRef, index) => {
      setSliderValues((prevValues) =>
        prevValues.map((prevValue) => {
          console.log(prevValue); // Log the previous value
          return prevValue + 20;
        })
      );
    });
  };

  return (
    <div>
      <button onClick={increaseVolume}>Increase Volume</button>
      {/* Displaying the slider values */}
      <ul>
        {sliderValues.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
};

But right now, the items are increasing by +40. I think it’s because there are two loops (forEach and map) and the +20 is being applied twice. But I’m not very sure how to fix this. Any suggestions?

Current output:

90
90
90
90
90

Desired output:

70
70
70
70
70

Working code on StackBlitz.

Tags:

2

Answers


  1. 0

    You have nested loops (forEach and map), and the increase is being applied twice. You can directly access the corresponding index in the map function.

    const increaseVolume = () => {
  setSliderValues((prevValues) =>
    prevValues.map((prevValue, index) => {
      console.log(prevValue); 
      return prevValue + 20;
    })
  );
};

    Working Stackblitz

    Login or Signup to reply.
  2. 0

    There is no need for the first forEach since you’re not doing anything with the audio’s here.

    Change the increaseVolume function to:

    const increaseVolume = (index) => {
    setSliderValues((prevValues) =>
        prevValues.map((prevValue) => prevValue + 20)
    );
};

    Updated Demo:

    const { useState } = React;

const App = ({ name }) => {

    const [sliderValues, setSliderValues] = useState([50, 50, 50, 50, 50]); // Initial slider values

    const increaseVolume = (index) => {
        setSliderValues((prevValues) =>
            prevValues.map((prevValue) => prevValue + 20)
        );
    };

    return (
        <div>
            <button onClick={increaseVolume}>Amplify Audio</button>
            {/* Displaying the slider values */}
            <ul>
                {sliderValues.map((value, index) => (
                    <li key={index}>{value}</li>
                ))}
            </ul>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("react"));
    <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>
<div id="react"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search