如何为反应元素的多个副本创建独立状态？

Question

New to React.

I am trying to create a set of 12 range sliders, in two columns of six. Each column is declared separately and each column independently declares the instance of the slider. Each range slider uses the package react-slider and has a currentValue state that is passed down as a prop along with the setCurrentValue method as the setState .

My issue is that when I display the values below each slider, they all sync up together, ie. they appear to all use the same variable. How do I get React to differentiate between each 'instance' as such? SliderValueText just returns an element with the value displayed.

The production value is a boolean that just tweaks the title slightly. The Slider element:

// imports here    
export const Slider = (props) => {
    const { currentValue, setCurrentValue, title, production } = props
    
    return (
        <>
            <ReactSlider
                className='customSlider'
                key={title+production}
                thumbClassName='customSlider-thumb'
                trackClassName='customSlider-track'
                markClassName='customSlider-mark'
                min={0}
                max={100}
                defaultValue={0}
                value={currentValue}
                onChange={(value) => setCurrentValue(value)}
            />
            <br/>
            <SliderValueText currentValue={currentValue} />
        </>
    )
}

The SliderSet element:

    // imports
    export const SliderSet = (props) => {
        const { currentValue, setCurrentValue, production } = props
    
        return (
            <>
                <Slider
                    currentValue={currentValue}
                    setCurrentValue={setCurrentValue}
                    title='Lorem Ipsum'
                    production={production}
                />
                // 5 further slider declarations here, all identical but with different titles
            </>
        

       )
    }

I have tried using the key prop and a map (below) and I have tried using an array as the currentValue state declaration in the App.js file but I cannot figure out how to use setCurrentValue with an array (below but further).

In this instance, titles is an array of all of the titles for each individual slider.

    const num = 6
    const nums = new Array(num)
    const element = [...nums.keys()].map(i => <Slider 
        key={i+titles[i]+production}
        usableKey={i}
        title={titles[i]}
        production={production}
        setCurrentValue={setCurrentValue} 
        currentValue={currentValue}
    />)
    
    return (
        <div>{element}</div>

State Array

// App.js
const [currentValue, setCurrentValue] = useState([0, 0, 0, 0, 0, 0])

// No idea how the usage for this works

Any and all help is appreciated:)

Answer 1

You need to pass different values to each slider, and different functions to update that state.

Many ways to go about it. Here is one example.

export const App = () => {
  const [sliderValue, setSliderValue] = useState(Array(12).fill(0));

  return sliderValue.map((val, index) => (
    <Slider
      currentValue={val}
      setCurrentValue={(newVal) => {
        const newSliderValues = [...sliderValue];
        newSliderValues[index] = newVal;
        setSliderValue(newSliderValues);
      }}
    />
  ));
};

When the state is an object (like this array) the internals of react determines if the object has updated by doing what's called a shallow comparison. It just checks if it's the same object or not, it doesn't examine the actual content of the object.

For that reason, when updating the array of slider values we first make a shallow copy of the array. Then update that shallow copy and finally set the state of the new array.