Luxi Lindsey - Madlib - Octos

package.json

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

src/App.css

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

src/App.js

@@ -2,19 +2,20 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import NewMadLibsForm from './components/NewMadLibsForm';
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
+      selectedMadLib: MadLibs[Math.floor(Math.random() * (MadLibs.length-1))],
     };
   }
 
   // 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
@@ -24,17 +25,21 @@ class App extends Component {
   }
 
   render() {
+
+    console.log(this.state.selectedMadLib);
+
     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
-        */}
+        <NewMadLibsForm
+          words = {this.state.selectedMadLib.words}
+          updateWord = {this.updateWord}
+          />
         <Story
           title={ this.state.selectedMadLib.title }
           text={ this.state.selectedMadLib.getText() }
-          />
+        />
       </section>
     );
   }

src/components/NewMadLibsForm.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class NewMadLibsForm extends Component {
+  static propTypes = {
+    words: PropTypes.array.isRequired,
+    updateWord: PropTypes.func.isRequired,
+  }
+
+  constructor(props) {
+    super(props);
+
+    let initialState = {};
+    props.words.forEach((word) => {
+      initialState[word.key]= '';
+    });
+
+    this.state = initialState;
+  }
+
+  onInputChange = (event) => {
+    console.log(`Got input change on ${event.target.name}, new value is ${event.target.value}`)
+
+    const newState = {};
+    newState[event.target.name] = event.target.value;
+    this.setState(newState);
+  }
+
+  onFormSubmit = (event) => {
+    event.preventDefault();
+
+    console.log('form submissions');
+
+    this.props.words.forEach((word) => {
+
+      this.props.updateWord(word.key, this.state[word.key])
+      this.setState(
+        {[word.key]: '',},
+      );
+    });
+
+  }
+
+
+  render() {
+
+    const words = this.props.words;
+    const inputs = words.map((word, index) => {
+      return <div key={ index }>
+            <label htmlFor={word.label}></label>
+            <input
+              name={word.key}
+              type="text"
+              placeholder={word.key}
+              value={this.state[word.key]}
+              onChange={this.onInputChange}
+              />
+          </div>
+    });
+
+    return (
+      <div>
+        <form
+        className="new-madlibs-form"
+        id="new-madlibs"
+        onSubmit={this.onFormSubmit}
+        >
+          {inputs}
+          <input
+            className="button success"
+            type="submit"
+            value="Show MadLib"
+          />
+        </form>
+      </div>
+    )
+  }
+
+}
+
+export default NewMadLibsForm;