CODEWITHSUNDEEP
reactjsreact-hooks
Subrato Pattanaik
Subrato Pattanaik

Reputation: 6049

Basics implementation example of useState Hooks in ReactJS

We know that the useState hook is used for managing state within functional components in ReactJs.

So, for learning purposes I was implementing the example of the useState hook (snippet is given below) wherein I have taken an array with some initial value and I need to update the array and display the whole updated array in the browser whenever I clicked on the button. I tried with the below snippet but didn't get the expected result.

Problem: When I click the button for first time it will add the new element in the array but after clicking the button for two or more times it only overrides the last element.

Expected Result: New elements should be added in the array rather than overriding the last element in the array.

I definitely missing any logic or any important concept of useState hook here in this example. Please help me to understand more on react Hooks.

const {useState} = React;

const Example = () => {
    const array = [1,2,3] ;
    const [newArray,setNewArray] = useState(array);
    const [newElement,setElement]= useState(array[array.length-1]);

    const handleBoth = () => {
        setElement(prev => prev + 1);
        setNewArray([...array,newElement]);
    }

    const mapping = newArray.map(element => <li> No. {element}</li>)    

    return (
        <div>
            <ul>
                {mapping}
            </ul>
            <button onClick={handleBoth}>Add</button>
        </div>
    );
};

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 0

Views: 91

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

Use the state newArray not the array for the map implementation. array will reinitialize to [1,2,3] on every render. In fact, you should just move the array constant outside of the component

const {useState} = React;
const array = [1,2,3];

const Example = () => {
    const [newArray,setNewArray] = useState(array);
    const [newElement,setElement]= useState(array[array.length-1]+1);

    const handleBoth = () => {
        setElement(prev => prev + 1);
        setNewArray([...newArray,newElement]);
    }

    const mapping = newArray.map(element => <li> No. {element}</li>)    

    return (
        <div>
            <ul>
                {mapping}
            </ul>
            <button onClick={handleBoth}>Add</button>
        </div>
    );
};

ReactDOM.render(
  <Example />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 1

Related Questions