How to change state dynamically in React?

Question

What i want to do is that i want to have the functionality of uncheck. For example: When i choose an odd the background of readonly input becomes yellow and when i click again it becomes white but it does not unselect the ratio of that odd. When background becomes yellow the e.target.value is added to the chosen state and when it becomes white again i could not find a way to remove the target value from state. I guess to understand better you might need to check the code in github( https://github.com/Elvaleryn/choosebet ). Here is an image: img1 . Note: i am well aware of .splice() method.

//state for selecting how much money user will put
const [betMoney, setBetMoney] = useState(3)
//state for the odd value
const [chosen, setChosen] = useState([1])
//basically a data base for games
const [games, setGames] = useState([])

//getting data from server
useEffect(() => {
    gameService
        .fetchGames()
        .then(response => {
            setGames(response.data)
        })
}, [])

//to pick the chosen odd
const handleOptionChange = (game, option) => {
    game[option] = !game[option]
    setGames([...games])
}

const handleMoneyChange = (event) => {
    setBetMoney(event.target.value)
}

//when odd is chosen it activates the handle option change to apply background color
const chooseOdd = (e, person, option) => {
    //when odd is chosen it activates the handle option change to apply background color
    handleOptionChange(person, option)
    const index = e.target.value
    setChosen(chosen.concat(index))
}

const ratioTotal = chosen.reduce((a, b) => a * b)
const result = parseFloat(ratioTotal * betMoney).toFixed(2)

Answer 1

By seeing your question i think you are trying to un select the value from state whenever you try to click game control to make background white.

I hope i understood correctly.

To unselect from state we need to uniquely identify the values but in current case value can be duplicated so we need to introduce key-id if value can be duplicated and before concat we need to identify if unique value already exist then unselect and if not then add.

{games.map(p =>
            <div>
                <p style={{ fontWeight: '600' }, {fontSize: '1.5em'}} key={p.id}>{p.game}</p>
            <div>
                <InputGroup className="mb-3">
                    <InputGroup.Prepend>
                        <Button style={buttonBackground} **g-id='1'** value={p.homeWin} onClick={(e) => chooseOdd(e, p, 'is1Selected')}>{p.homeWin}</Button>
                    </InputGroup.Prepend>
                    <FormControl id="one" style={{ backgroundColor: p.is1Selected ? 'Yellow' : 'White' }} value={p.homeWin} aria-describedby="basic-addon1" readOnly />

                    <InputGroup.Prepend>
                        <Button style={buttonBackground} **g-id='2'** value={p.draw} onClick={(e) => chooseOdd(e, p, 'is2Selected')}>{p.draw}</Button>
                    </InputGroup.Prepend>
                    <FormControl id="two" style={{ backgroundColor: p.is2Selected ? 'Yellow' : 'White' }} value={p.draw} aria-describedby="basic-addon1" readOnly />

                    <InputGroup.Prepend>
                        <Button style={buttonBackground} **g-id='3'** value={p.awayWin} onClick={(e) => chooseOdd(e, p, 'is3Selected')}>{p.awayWin}</Button>
                    </InputGroup.Prepend>
                    <FormControl id="three" style={{ backgroundColor: p.is3Selected ? 'Yellow' : 'White' }} value={p.awayWin} aria-describedby="basic-addon1" readOnly />
                </InputGroup>
            </div>
            </div>

)}

with the help of key we can identify value which we need to select/unselect

//when odd is chosen it activates the handle option change to apply background color
const chooseOdd = (e, person, option) => {
    //when odd is chosen it activates the handle option change to apply background color
    handleOptionChange(person, option)
    const index = e.target.value
    const key = e.target.getAttribute("g-id");
    const data = key.concat('(key)-').concat(index);

    const i = chosen.indexOf(data);
    if (i !== -1) {
        const d = chosen.filter(d => d != data);
        alert(d);
        setChosen(d)
    }
    else {
        alert(chosen.concat(data));
        setChosen(chosen.concat(data))
    }
}

Hope it will help you.