Edit method does not retrieve appropriate information [Error] React

Question

I've developed a basic API using asp.net MVC that works as a basic User CRUD. (Create,Read, Update & Delete)

I have started to create a front end using ReactJS that has a Add user modal form, edit user modal and delete function.

The GET, POST and DELETE features all work, the only issue comes from the PUT. When I click on the Edit user modal, only the Id shows.

The code for the editUserModal.js is as follows:

const BASE_API_URL = `http://localhost:56062/api/users`;


export class EditUserModal extends Component{
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }



    componentDidMount(){
        fetch(BASE_API_URL)
        .then(response => response.json())
        .then(data => {
        this.setState({deps:data});
        });
      }

    handleSubmit(event){
        event.preventDefault();
        fetch(BASE_API_URL,{
            method:'PUT',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body:JSON.stringify({

                Id:event.target.Id.value,
                firstName:event.target.firstName.value,
                lastName:event.target.lastName.value,
                Email:event.target.Email.value,
                mobileNumber:event.target.mobileNumber.value,
                dateOfBirth:event.target.dateOfBirth.value,
                lastModified:event.target.lastModified.value
            })
        })
        .then(res=> res.json())
        .then((result) =>
        {
            console.log(result);
        },
        (error) => {
            console.log('Failed')
        }
        )
    }

    render(){
        return(
            
            
              
                Edit User
              
            
            
              
                  
                      
                          

                          
                                User ID
                                
                              
                              
                                First Name
                                
                              
                              
                                Last Name
                                
                              
                              
                                Email address
                                
                              
                              
                                Mobile Number
                                
                              
                              
                                Date of Birth
                                
                              
                            
                                
                            

                          
                      
                  
              
            
            
              
            
          
        )
    }
}

The code that contains the table (User.js) is as follows:

export class User extends Component {

    constructor(props){
        super(props);
        this.state = {users:[], addModalShow : false, editModalShow: false}

    }

    componentDidMount(){
        this.refreshList();

    }

    refreshList(){
      fetch(BASE_API_URL)
      .then(response=> response.json())
      .then(data => {
          this.setState({users:data})
      })
    }

    componentDidUpdate(){
      this.refreshList();

  }

    deleteUser(userid)
    {
      if(window.confirm('Are you sure?'))
      {
          fetch(`http://localhost:56062/api/users/`+userid,{
              method:'DELETE',
              header:{'Accept':'application/json',
              'Content-Type':'application/json'
          }
          })
      }
    }
render(){

    const {users, userid, firstname, lastname, useremail, mobilenumber, dateofbirth, lastmodified} = this.state;
    let addModalClose =() => this.setState({addModalShow:false});
    let editModalClose =() => this.setState({editModalShow:false});

    return(
        
            
              
                
              

        
        {users.map(user=> 
          
          )}
   
   
     
       Id
       First Name
       Last Name
       Email
       Mobile Number
       Date of Birth
       Last Modified
       Edit
       Delete
     
   
   
            {user.Id}
            {user.firstName}
            {user.lastName}
            {user.Email}
            {user.mobileNumber}
            {user.dateOfBirth}
            {user.lastModified}
            
              
              
                
              
              
              
              
              

          
 

 
    )
}

}

So I think the issue lies within this section of code in the User.js

The code for the guide that I was looking at seemed to load all the appropriate fields when it was written like so,

When the code was written like so, Only the Id and the mobilenumber will get loaded into the Edit User modal for some reason like so.

Whereas when I have the code like so, it displays the right Id for that column, but then displays all the information for the last inserted column like so.

The image above should be showing user 13, but instead displaying the rest of the info for the last input which is user 17.

Is there any specific reason as to why this is happening? maybe I am setting the states in a bad way?

======================== UPDATE =================================

I have now set a key prop within the component, yet the same thing is happening, only the id and mobile number appears in the text boxes when a edit modal is loaded up.

Kitanga Nday · Accepted Answer

Set a prop called key on the EditUserModal component and set it to the userId value.

You can read more about this here

Edit method does not retrieve appropriate information [Error] React

Answers (1)

Related Questions