javascript reactjs_http.js

Posted 2021-05-03

import React from "react";

import axios from "axios";

export default class PersonList extends React.Component {
  state = {
    persons: [],
    name: "",
    id: ""
  };

  handleChange = event => {
    this.setState({ name: event.target.value });
  };

  handleChangeDelete = event => {
    this.setState({ id: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios
      .post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      });
  };

  handleSubmitDelete = event => {
    event.preventDefault();

    axios
      .delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      });
  };

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`).then(res => {
      const persons = res.data;
      this.setState({ persons });
    });
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.persons.map(person => (
            <li>{person.name}</li>
          ))}
        </ul>

        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>

        <form onSubmit={this.handleSubmitDelete}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    );
  }
}