从多个下拉列表中选择不同的值具有相同的数据

Question

Right now when I select an option from first selectlist, it automatically set the 2nd select list value, but I want if I select an option from first select list it should be set the value of first select and same for 2nd select list.

  import React, {useState} from "react";

    const options = [
    {
        label: "Acai Berry",
        value: "acaiberry",
        color: "#FF4D4D",
        quantity: 1,
        price: 20
    },

    {
        label: "Blood Orange",
        value: "bloodorange",
        color: "#FF4D4D",
        quantity: 1,
        price: 32
    },

    {
        label: "Honey Ginger Lemon",
        value: "honeyginger",
        quantity: 1,
        color: "#FF4D4D",
        price: 17
    }
    ];

    const RandomizerComponent = () => {
    const [bundle, setBundle] = useState("acaiberry");

    const handleChange = (e) => {
        setBundle(e.target.value);
    };
    const spin = () => {
        randomItems();
    };

    const randomItems = () => {
        const length = selectItems.length;
        const randomIndex = Math.floor(Math.random() * length);
        const data = selectItems[randomIndex].value;
        setBundle(data);
    };

    const quantity = 2;
    // Rabdomizer Qunatity and Data
    const quantityOfSomething = new Array(quantity).fill(options);

    return (
        <div>
        <h1 style={{textAlign: "center"}}>CONFIRM SELECTION</h1>
        <div className="select-container">
            <div className="select-Wrapper">
            {quantityOfSomething.map((item, index) => (
                <div key={`${item}-${index}`}>
                <select
                    value={bundle}
                    onChange={handleChange}
                    className="selectList"
                >
                    {item.map((option, index) => (
                    <option key={index} value={option.value}>
                        {option.label}
                    </option>
                    ))}
                </select>
                <div>
                    {item
                    .filter((option) => option.value == bundle)
                    .map((filteredBundle, index) => (
                        <div className="image-wrapper" key={index}>
                        <img src={filteredBundle.image} alt="" />
                        </div>
                    ))}
                </div>
                </div>
            ))}
            </div>
            <div>
            <button onClick={spin} className="spin-btn">
                Spin
            </button>
            </div>
        </div>
        </div>
    );
    };

    export default Randomizer;

Here is the output of above code

Here is the reference website: https://simulate.com/buy/

Answer 1

Your this code:

<select value={bundle} onChange={handleChange} className="selectList" >

It is running through map but in both the select boxes you assign value={bundle}. Therefore whenever you setBundle , it will impact states of both the select boxes.

Kindly assign individual ids and check which selectbox was changed or create two separate change handlers and bind events to them separately.