starting react app read/delete

ClientApp/src/components/Home.js

@@ -2,25 +2,105 @@ import React, { Component } from 'react';
 
 export class Home extends Component {
   static displayName = Home.name;
+  state = {
+      people:[]
+  }
 
-  render () {
-    return (
-      <div>
-        <h1>Hello, world!</h1>
-        <p>Welcome to your new single-page application, built with:</p>
-        <ul>
-          <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
-          <li><a href='https://facebook.github.io/react/'>React</a> for client-side code</li>
-          <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
-        </ul>
-        <p>To help you get started, we have also set up:</p>
+  componentDidMount = () => {
+      fetch('/people')
+        .then(response => response.json())
+        .then(data => {
+            this.setState({
+                people:data
+            })
+        });
+  }
+
+  createPerson = (event) => {
+      event.preventDefault();
+      fetch(
+          '/people',
+          {
+              method:'POST',
+              headers: {
+                  'Accept': 'application/json; charset=utf-8',
+                  'Content-Type': 'application/json;charset=UTF-8'
+              },
+              body: JSON.stringify({
+                  Name:this.state.newPersonName,
+                  Age:this.state.newPersonAge
+              })
+          }
+      )
+      .then(response => response.json())
+      .then(
+          (data) => {
+              this.setState({
+                  people:data
+              })
+          }
+      )
+  }
+
+  deletePerson = (event) => {
+      fetch(
+          '/people/' + event.target.value,
+          {
+              method:'DELETE'
+          }
+      )
+      .then(response => response.json())
+      .then(
+          (data) => {
+              this.setState({
+                  people:data
+              })
+          }
+      )
+  }
+
+
+  changeNewPersonAge = (event) => {
+      this.setState({
+          newPersonAge:event.target.value
+      });
+  }
+
+  changeNewPersonName = (event) => {
+      this.setState({
+          newPersonName:event.target.value
+      });
+  }
+
+  render = () => {
+      return <div>
+          <h2>Create Person</h2>
+          <form onSubmit={this.createPerson}>
+              <input onKeyUp={this.changeNewPersonName} type="text" placeholder="name" /><br/>
+              <input onKeyUp={this.changeNewPersonAge} type="number" placeholder="age" /><br/>
+              <input type="submit" value="Create Person" />
+          </form>
+          <h2>List of People</h2>
           <ul>
-          <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
-          <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
-          <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
+              {
+                  this.state.people.map(
+                      (person, index) => {
+                          return <li key={index}>
+
+                              {person.name}: {person.age}
+
+                              <button value={person.personId} onClick={this.deletePerson}>DELETE</button>
+
+                              <form id={person.personId} onSubmit={this.updatePerson}>
+                                  <input onKeyUp={this.changeUpdatePersonName} type="text" placeholder="name"/><br/>
+                                  <input onKeyUp={this.changeUpdatePersonAge} type="number" placeholder="age"/><br/>
+                                  <input type="submit" value="Update Person"/>
+                              </form>
+                          </li>
+                      }
+                  )
+              }
           </ul>
-        <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
       </div>
-    );
   }
 }