Brenda Rios - Octos - Madlib

package.json

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

src/App.css

@@ -7,3 +7,11 @@ body {
   color: white;
   font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
 }
+
+.false {
+	display: none;
+}
+
+.true {
+  display:inline;
+}

src/App.js

@@ -2,18 +2,20 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import StoryForm from './components/StoryForm.js';
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
+        selectedMadLib: MadLibs[Math.floor(Math.random() * MadLibs.length-1)],
+        displayStory: false
     };
+
+    this.updateWord = this.updateWord.bind(this)
   }
 
-  // Update the value of a word in the selected
-  // mad lib using setState
   updateWord(key, value) {
     const updatedMadLib = this.state.selectedMadLib;
     const changedWord = updatedMadLib.words.find((word) => {
@@ -23,18 +25,23 @@ class App extends Component {
     this.setState({selectedMadLib: updatedMadLib});
   }
 
+
   render() {
+
     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
-        */}
+          <p>Fill in all of the choices to see your final story.</p>
+        <StoryForm
+          updateWord={this.updateWord}
+          words = {this.state.selectedMadLib.words}
+          />
+
         <Story
           title={ this.state.selectedMadLib.title }
           text={ this.state.selectedMadLib.getText() }
-          />
+      />
+
       </section>
     );
   }

src/components/StoryForm.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+
+class StoryForm extends Component {
+
+  static propTypes = {
+    updateWord: PropTypes.func.isRequired,
+    words: PropTypes.array,
+
+  };
+
+  onFieldChange = (key, value) => {
+      this.props.updateWord(key, value);
+   };
+
+  onSubmit = (event) => {
+      event.preventDefault();
+      console.log("Form submission");
+      this.setState({
+			displayStory: true
+		})
+    };
+
+  render() {
+    let words = this.props.words;
+    let inputs = words.map((word) => {
+          return (
+           <section key={word.key}
+           className="label-input">
+             <label>{word.label}</label>
+             <input
+              name={word.key}
+              onChange={(event) => { this.onFieldChange(word.key, event.target.value) }}
+              />
+           </section>
+         );
+       });
+    return (
+      <div className={'true'}>
+        <form className="story-form"
+        onSubmit = {this.onSubmit}
+          >
+          {inputs}
+          <input type ="submit" className="button"/>
+        </form>
+      </div>
+    );
+  }
+}
+
+export default StoryForm;