フォームに入力した要素をテーブルに追加できるようになる

my-app/src/App.js

@@ -1,26 +1,10 @@
 import React, {Component} from 'react';
 import Table from './Table';
+import Form from "./Form";
 
 class App extends Component {
     state = {
-        characters: [
-            {
-                'name': 'Charlie',
-                'job': 'Janitor'
-            },
-            {
-                'name': 'Mac',
-                'job': 'Bounce'
-            },
-            {
-                'name': 'Dee',
-                'job': 'Aspiring actress'
-            },
-            {
-                'name': 'Dennis',
-                'job': 'Bartender'
-            }
-        ]
+        characters: []
     };
 
     removeCharacter = index => {
@@ -33,12 +17,19 @@ class App extends Component {
         })
     };
 
+    handleSubmit = character => {
+        this.setState({
+            characters: [...this.state.characters, character]
+        });
+    }
+
     render() {
         return (
             <div className="container">
                 <Table characterData={this.state.characters}
                        removeCharacter={this.removeCharacter}
                 />
+                <Form handleSubmit={this.handleSubmit}/>
             </div>
         );
     }

my-app/src/Form.js

@@ -0,0 +1,58 @@
+import React, {Component} from 'react';
+
+class Form extends Component {
+    constructor(props) {
+        super(props);
+
+        this.initialState = {
+            name: '',
+            job: ''
+        };
+
+        this.state = this.initialState;
+    }
+
+    handleChange = event => {
+        const {name, value} = event.target;
+
+        this.setState({
+            [name]: value
+        })
+        // nameにしてしまうとオブジェクトリテラルのキーがname固定になってしまう。配列リテラルにするとnameが評価される
+    };
+
+    submitForm = () => {
+        this.props.handleSubmit(this.state);
+        this.setState(this.initialState);
+    };
+
+    render() {
+        const {name, job} = this.state;
+
+        return (
+            <form>
+                <label>Name</label>
+                <input
+                    type="text"
+                    name="name"
+                    value={name}
+                    onChange={this.handleChange}
+                />
+                <label>Job</label>
+                <input
+                    type="text"
+                    name="job"
+                    value={job}
+                    onChange={this.handleChange}
+                />
+                <input
+                    type="button"
+                    value="Sumbit"
+                    onClick={this.submitForm}
+                />
+            </form>
+        );
+    }
+}
+
+export default Form;

my-app/src/index.js

@@ -1,7 +1,6 @@
-import React, {Component} from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
 
-
 ReactDOM.render(<App/>, document.getElementById('root'));