import React, { useState } from "react";

const friendsArray = [

  {

    name: "Lalit",

    age: 23,

  },

  {

    name: "Neha",

    age: 22,

  },

  {

    name: "Piyush",

    age: 20,

  },

];

function Arrex() {

  const [arr, setArr] = useState(friendsArray);

  const handleclick = () => {

    setArr((prevArr) => [

      ...prevArr,

      {

        name: "Shubham",

        age: 25,

      },

    ]);

  };

  const handleupdate = () => {

    // Update specific elements in the array

    setArr((prevArr) => [

      {

        ...prevArr[0],

        name: "Purohit",

      },

      {

        ...prevArr[1],

        name: "Sharma",

      },

      ...prevArr.slice(2), // Keep the rest of the array unchanged

    ]);

  };

  return (

    <div>

      <h2>Adding a new value to the array</h2>

      <ul>

        {arr.map((friend, index) => (

          <li key={index}>

            name: {friend.name}

            <br />

            age: {friend.age}

          </li>

        ))}

      </ul>

      <button onClick={handleclick}>Add New</button>

      <button onClick={handleupdate}>Update</button>

    </div>

  );

}

export default Arrex;