change the key value of only the first object in the array react

January 30, 2024

I have a hook with objects in an array and I want to change the value of key test of the first object only.

const [Value, setValue] = useState([{test: 0}, {test: 0}]);

Also, I would like to be able to change a value from one to another at the click of a button, like toggle. For example to get only 0 or 1 on click on one button.

Could you please tell me how to do it?

>Solution :

You can make a copy of the state in the callback of the set function.

Then alter index 0 with the new value and return the copy.

const { useState, useEffect } = React;

const Example = () => {

    const [value, setValue] = useState([{test: 0}, {test: 0}]);
    
    useEffect(() => {
        setValue(p => {
            let d = [ ...p ];
            d[0].test = 420;
            return d;
        })
    }, []);

    return (
        <div>
            <h1>{'Example'}</h1>
            <em>{JSON.stringify(value)}</em>
        </div>
    )
}
ReactDOM.render(<Example />, 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>

As requested, on a click event:

const { useState, useEffect } = React;

const Example = () => {

    const [value, setValue] = useState([{test: 0}, {test: 0}]);
    
    const updateFirstTestValue = () => {
        setValue(p => {
            let d = [ ...p ];
            d[0].test = d[0].test + 1;
            return d;
        })
    }

    return (
        <div>
            <h1>{'Example'}</h1>
            <button onClick={updateFirstTestValue}>Add 1 to 'test'!</button>
            <br />
            <em>{JSON.stringify(value)}</em>
        </div>
    )
}
ReactDOM.render(<Example />, 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>

As requested, on a click event with hard-coded values:

const { useState, useEffect } = React;

const Example = () => {

    const [value, setValue] = useState([{test: 0}, {test: 0}]);
    
    const updateFirstTestValue = (to) => {
        setValue(p => {
            let d = [ ...p ];
            d[0].test = to;
            return d;
        })
    }

    return (
        <div>
            <h1>{'Example'}</h1>
            <button onClick={() => updateFirstTestValue(0)}>Set to 0</button>
            <button onClick={() => updateFirstTestValue(1)}>Set to 1</button>
            <br />
            <em>{JSON.stringify(value)}</em>
        </div>
    )
}
ReactDOM.render(<Example />, 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>