title: How do I update state with axios put request on my React application? (React/Node Express)
body: <p>I've been reviewing my HTTP/AJAX project and was able to implement my get, post and delete. But I tried to implement the put request on my own and have been stuck on it for two days (I know). </p>
  
  <p>My understanding is that there should be the axios request in an event handler, and then you bind the handler. My put request has the id and is updating, <strong>but the id (friend.id) is only replaced by an empty string.</strong> Put request is working in the server and updates the data correctly. So I see my problem is in React.</p>
  
  <p>I looked up help guides on editing state and applying it to the put request. I initialized <code>editing: false</code> as state, made a handler for setting editing to true and did an onChange on each input in the form for editing at the bottom. But I see that I'm not understanding how the handleUpdating event handler should connect with put (I commented them below), or if I needed it.</p>
  
  <p>Here is my file hierarchy:
  <a href="https://i.stack.imgur.com/qxQD9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qxQD9.png" alt="file hierarchy"></a></p>
  
  <p>Here is the server's put request (located in server.js):</p>
  
  <pre><code>app.put('/friends/:id', (req, res) =&gt; {
    const { id } = req.params;
    let friendIndex = friends.findIndex(friend =&gt; friend.id == id);
  
    if (friendIndex &gt;= 0) {
      friends[friendIndex] = { ...friends[friendIndex], ...req.body };
      res.status(200).json(friends);
    } else {
      res
        .status(404)
        .json({ message: `The friend with id ${id} does not exist.` });
    }
  });
  </code></pre>
  
  <p>And here is the code in my React Application (located in Friendslist.js):</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  const API_URL = 'http://localhost:5000/friends';
  
  class FriendsList extends React.Component {
    constructor() {
      super();
      this.state = {
        friends: [],
        editing: false,
        loading: true,
        showComponent: false,
        name: '',
        age: '',
        email: ''
      }
    }
  
    componentDidMount() {
      axios
        .get(`${API_URL}`)
        .then(response =&gt; {
          console.log(response.data);
          this.setState({ friends: response.data, loading: false });
        })
        .catch(error =&gt; {
          console.log('There was an error', error);
        })
    }
  
    onClickComponent = () =&gt; {
      this.setState({ showComponent: true });
    }
  
    handleName = (event) =&gt; {
      event.preventDefault();
      this.setState({
        name: event.target.value
      });
    }
  
    handleAge = (event) =&gt; {
      event.preventDefault();
      this.setState({
        age: event.target.value
      });
    }
  
    handleEmail = (event) =&gt; {
      event.preventDefault();
      this.setState({
        email: event.target.value
      });
    }
  
    // handleUpdating - setting edit to true
     handleUpdating = (event) =&gt; {
       this.setState({ editing: true })
    }
  
    onClickComponent = () =&gt; {
      this.setState({ showComponent: true });
    }
  
    handleDelete = (id) =&gt; {
      axios
        .delete(`${API_URL}/${id}`)
        .then(response =&gt; {
          this.setState({
            friends: response.data
          })
          console.log(response.data)
        })
        .catch(error =&gt; {
          console.log(error)
        })
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      axios.post(`${API_URL}`, {
        name: this.state.name,
        age: this.state.age,
        email: this.state.email
      })
        .then(response =&gt; {
          this.setState({ friends: response.data });
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  
  
    // This is the put request
    handleEdit = (id) =&gt; {
      axios.put(`${API_URL}/${id}`, {
        name: this.state.name,
        age: this.state.age,
        email: this.state.email
      })
        .then(response =&gt; {
          this.setState({ friends: response.data });
        })
        .catch(error =&gt; {
          console.log(error);
        });
    }
  
    render() {
      if (this.state.loading) {
        return &lt;h1&gt;Loading Friends....&lt;/h1&gt;
      } else if (!this.state.loading) {
        return (
          &lt;div&gt;
            &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;label&gt;
                Name:
                &lt;input type="text" value={this.state.name} onChange={this.handleName} /&gt;
              &lt;/label&gt;
              &lt;label&gt;
                Age:
                &lt;input type="text" value={this.state.age} onChange={this.handleAge} /&gt;
              &lt;/label&gt;
              &lt;label&gt;
                Email:
                &lt;input type="text" value={this.state.email} onChange={this.handleEmail} /&gt;
              &lt;/label&gt;
              &lt;input type="submit" value="Submit" /&gt;
            &lt;/form&gt;
  
  
            &lt;div&gt;{this.state.friends.map((friend) =&gt; {
              return (
                &lt;div onChange={() =&gt; this.handleUpdating} key={friend.id} className="friend"&gt;
                  &lt;div className="friend-name"&gt;{friend.name}&lt;/div&gt;
                  &lt;div className="friend-age"&gt;{`Age: ${friend.age}`}&lt;/div&gt;
                  &lt;div className="friend-email"&gt;{`Email: ${friend.email}`}&lt;/div&gt;
                  &lt;button onClick={() =&gt; this.handleDelete(friend.id)}&gt;Delete&lt;/button&gt;
                  &lt;button onClick={this.onClickComponent}&gt;Edit&lt;/button&gt;
                  {this.state.showComponent ? &lt;Form handleEdit={() =&gt; this.handleEdit(friend.id)} /&gt; : null}
                &lt;/div&gt;
              );
            })}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
  
    }
  }
  
  
  
  const Form = (props) =&gt; {
    return (
        &lt;form onSubmit={() =&gt; props.handleEdit(props.id)}&gt;
          &lt;label&gt;
            Name: &lt;input type="text" value={props.name} onChange={this.handleUpdating} /&gt;
          &lt;/label&gt;
          &lt;label&gt;
            Age: &lt;input type="text" value={props.age} onChange={this.handleUpdating} /&gt;
          &lt;/label&gt;
          &lt;label&gt;
            Email: &lt;input type="text" value={props.email} onChange={this.handleUpdating} /&gt;
          &lt;/label&gt;
          &lt;input type="submit" value="Update" /&gt;
        &lt;/form&gt;
    );
  }
  
  export default FriendsList;
  </code></pre>
  
  <p>I appreciate any help and/or feedback!</p>