I have an array name Employees which contains a set of names, ages, and ids which are rendered as table headers name, age, and an edit button. I have created a simple edit component that will edit that particular name and age column.

When I am editing the column I am getting an error saying cannot set properties of undefined (setting 'Name'). I have matched object properties and everything is fine but still am getting the error.

So in the edit component, what I am doing is are 2 input fields one for age and the other for name, the user will enter the updated name and age and handleSubmit button will update the same object properties in the Employees array.

PS: If you are thinking that I am directly changing the original array ---> I was following a tutorial, he also did the same and it worked as expected.

// Employees array

const Employees = [
    {
        id: 1,
        Name: "Apoorv",
        Age: 20
    },
    {
        id: 2,
        Name: "Apoorv1",
        Age: 21
    },
    {
        id: 3,
        Name: "Apoorv2",
        Age: 22
    }
]

export default Employees


// edit component 

import { React, useState, useEffect } from "react";
import { Button, Form } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import Employees from "./Employees";
import { Link, useNavigate } from "react-router-dom";
import { v4 as uuid } from "uuid";

const Edit = () => {
    const [name, setName] = useState("");
    const [age, setAge] = useState("");
    const [id, setid] = useState("");

    let history = useNavigate();


    var index = Employees.map(function (i) {
        return i.id;
    }).indexOf(id);

    function handleSubmit(e) {

        e.preventDefault()

        let a = Employees[index]
        a.Name = name   // according to console error is coming in this line but here 
                           everything is fine
        a.Age = age
        history("/")
    }

    useEffect(() => {
        setid(localStorage.getItem("Id"))
        setName(localStorage.getItem("Name"))
        setAge(localStorage.getItem("Age"))
    }, [])



    return (
        <Form className="d-grip gap-2" style={{ margin: "15rem" }}>
            <Form.Group className="mb-3" controlId="formName">
                <Form.Control
                    type="text"
                    placeholder="Enter Name"
                    required
                    onChange={(e) => setName(e.target.value)}
                    value={name}></Form.Control>
            </Form.Group>



            <Form.Group className="mb-3" controlId="formAge">
                <Form.Control
                    type="text"
                    placeholder="Enter Age"
                    required
                    onChange={(e) => setAge(e.target.value)} value={age}
                ></Form.Control>
            </Form.Group>
            <Button onClick={(e) => handleSubmit(e)}>Update</Button>
        </Form>
    )
}

export default Edit

CodePudding user response：

value of index is -1 because when your index is calculate id is "". So on submit when you try to access Employees[-1] it returns undefined. const [id, setid] = useState(1); use this by default you will be able to update product with id 1

CodePudding user response：

replace this

var index = Employees.map(function (i) {
        return i.id;
    }).indexOf(id);

with

const getIndex = () => Employees.map(function (i) {
        return i.id;
    }).indexOf(id);

then replace

 let a = Employees[index]

with

 let a = Employees[getIndex()]