title: Delete request with axios - React
body: <p>I'm trying to create small app based on Json server package which will help me to remember movies I want to watch when I have free time, want to learn React and Axios so I'm doing it with these technologies , Idea is when I click on add movie button - movie will be added to Json database,
  when click on delete - particular movie will be deleted
  and when click on the list - I will be able to edit text,</p>
  
  <p>Delete works if I do something like <a href="http://localhost:3000/movies/1" rel="nofollow noreferrer">http://localhost:3000/movies/1</a>, to show what id should it delete, but is there any way to set it? To delete the list connected to button I'm clicking at? something like <a href="http://localhost:3000/movies/" rel="nofollow noreferrer">http://localhost:3000/movies/</a>"id"? I will be grateful for any help as I totally don't have any idea how to move on with it</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import axios from 'axios';
  import List from "./list.jsx";
  
  class Form extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              name:'',
              type:'',
              description:'',
              id:'',
              movies: [],
  
          }
      }
  
      handleChangeOne = e =&gt; {
          this.setState({
              name:e.target.value
          })
      }
      handleChangeTwo = e =&gt; {
          this.setState({
              type:e.target.value
          })
      }
      handleChangeThree = e =&gt; {
          this.setState({
              description:e.target.value
          })
      }
  
      handleSubmit = e =&gt; {
          e.preventDefault()
          const url = `http://localhost:3000/movies/`;
          axios.post(url, {
              name: this.state.name,
              type: this.state.type,
              description:this.state.description,
              id:this.state.id
          })
              .then(res =&gt; {
                  // console.log(res);
                  // console.log(res.data);
                  this.setState({
                      movies:[this.state.name,this.state.type,this.state.description, this.state.id]
                  })
              })
      }
  
      handleRemove = (e) =&gt; {
          const id = this.state.id;
          const url = `http://localhost:3000/movies/`;
          // const id = document.querySelectorAll("li").props['data-id'];
          e.preventDefault();
          axios.delete(url + id)
              .then(res =&gt; {
                  console.log(res.data);
              })
              .catch((err) =&gt; {
                  console.log(err);
              })
      }
  
      // editMovie = e =&gt; {
      //     const url = `http://localhost:3000/movies/`;
      //     e.preventDefault();
      //     const id = e.target.data("id");
      //     axios.put(url + id, {
      //             name: this.state.name,
      //             type: this.state.type,
      //             description:this.state.description,
      //     })
      //         .then(res =&gt; {
      //             console.log(res.data);
      //         })
      //         .catch((err) =&gt; {
      //             console.log(err);
      //         })
      // }
  
  
      render() {
          return (
  
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;input type="text" placeholder="movie" onChange={this.handleChangeOne}/&gt;
                  &lt;input type="text" placeholder="type of movie" onChange={this.handleChangeTwo}/&gt;
                  &lt;textarea cols={40} rows={5} placeholder="description of the movie" onChange={this.handleChangeThree}&gt;&lt;/textarea&gt;
                  &lt;input type="submit" value="Add movie"&gt;&lt;/input&gt;
                  &lt;List removeClick={this.handleRemove} editClick={this.editMovie}/&gt;
              &lt;/form&gt;
          )
      }
  }
  
  export default Form
  </code></pre>
  
  <p>List:</p>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import axios from 'axios';
  
  
  class List extends React.Component{
      constructor(props){
          super(props)
          this.state = {
              movies: [],
  
          }
      }
  
      componentDidMount() {
          const url = `http://localhost:3000/movies`;
          console.log(url);
          axios.get(url)
              .then(res =&gt; {
                  console.log(res.data);
                  const movies = res.data;
                  this.setState({
                      movies: movies
                  })
              })
              .catch((err) =&gt; {
                  console.log(err);
              })
  
      }
  
      // editMovie =(e) =&gt; {
      //     console.log("it works with edit!");
      //     if (typeof this.props.editClick === "function") {
      //         this.props.editClick(e)
      //     } else {
      //         console.log("Doesn't work with edit");
      //     }
      // }
  
      removeMovie =(e) =&gt; {
          console.log("it works with remove!");
          if (typeof this.props.removeClick === "function") {
              this.props.removeClick(e)
          } else {
              console.log("Doesn't work with remove");
          }
      }
  
  
      render(){
          let movies = this.state.movies.map(e =&gt;
              &lt;ul onClick={this.editMovie}&gt;
                  &lt;li data-id={e.id}&gt;
                      {e.name}
                  &lt;/li&gt;
                  &lt;li data-id={e.id}&gt;
                      {e.type}
                  &lt;/li&gt;
                  &lt;li data-id={e.id}&gt;
                      {e.description}
                  &lt;/li&gt;
                  &lt;button type="submit" onClick={this.removeMovie}&gt;Delete&lt;/button&gt;
              &lt;/ul&gt;)
  
          return(
              &lt;div&gt;
                  {movies}
              &lt;/div&gt;
          )
      }
  }
  
  export default List;
  </code></pre>
  
  <p>Json part</p>
  
  <pre><code>{
    "movies": [
      {
        "id": 1,
        "name": "Kongi",
        "type": "drama",
        "description": "movie about monkey"
      },
      {
        "id": 2,
        "name": "Silent Hill",
        "type": "thriller",
        "description": "movie about monsters"
      },
      {
        "name": "Harry potter",
        "type": "fantasy",
        "description": "movie about magic and glory",
        "id": 3
      }
    ]
  }
  </code></pre>