Ampers: Nora Peters

package.json

@@ -13,4 +13,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

src/App.js

@@ -2,19 +2,22 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import MadlibForm from './components/MadlibForm.js';
+
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
+      selectedMadLib: MadLibs[getRandomInt(MadLibs.length)],
+      showStory: false,
     };
   }
 
   // Update the value of a word in the selected
   // mad lib using setState
-  updateWord(key, value) {
+  updateWord = (key, value) => {
     const updatedMadLib = this.state.selectedMadLib;
     const changedWord = updatedMadLib.words.find((word) => {
       return word.key === key
@@ -23,21 +26,41 @@ class App extends Component {
     this.setState({selectedMadLib: updatedMadLib});
   }
 
+  renderStory = () => {
+    this.setState( {
+      showStory: true,
+    })
+  }
+
   render() {
+    const showStory = this.state.showStory;
+
+    const story = showStory ? (
+      <Story
+        title={ this.state.selectedMadLib.title }
+        text={ this.state.selectedMadLib.getText() }
+      />
+    ) : (
+      ''
+    );
+
     return (
       <section className="App">
         <h1>Welcome to MadLibs!</h1>
         <p>Fill in all of the choices to see your final story.</p>
-        {/*
-          Render your form with input values
-        */}
-        <Story
-          title={ this.state.selectedMadLib.title }
-          text={ this.state.selectedMadLib.getText() }
-          />
+        <MadlibForm
+          renderStory = { this.renderStory }
+          words={this.state.selectedMadLib.words}
+          updateWord={ this.updateWord }
+        />
+          { story }
       </section>
     );
   }
 }
 
+function getRandomInt(max) {
+  return Math.floor(Math.random() * Math.floor(max));
+}
+
 export default App;

src/components/MadlibForm.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import  './MadlibForm.css';
+import PropTypes from 'prop-types'
+
+class MadlibForm extends Component {
+
+  constructor() {
+    super();
+  }
+
+  static propTypes = {
+    // addStudent: PropTypes.func.isRequired,
+  }
+
+  wordValid = () => {
+    return this.state.email.match(/\S+@\S+/)
+  }
+
+  // clearForm = () => {
+  //
+  // }
+
+  onSubmit = (event) => {
+    event.preventDefault();
+    this.props.renderStory()
+    // this.clearForm();
+  }
+
+  render() {
+
+    const inputs = this.props.words.map (item => {
+      return <div key={ item.key }>
+              <label htmlFor={item.key}>
+                {item.label}:
+              </label>
+              <input
+                name={item.label}
+                // placeholder={item.label}
+                onChange={(event) =>
+                  { this.props.updateWord(item.key, event.target.value) }}
+              />
+            </div>
+    });
+
+    return (
+      <div>
+        <form onSubmit={this.onSubmit}
+        className="new-madlib-form">
+          {inputs}
+          <input
+            className="button success"
+            type="submit"
+            value="Submit"
+          />
+        </form>
+      </div>
+    );
+  }
+}
+
+export default MadlibForm;