Aruna(ampers)

package.json

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

src/App.js

@@ -2,14 +2,18 @@ import React, { Component } from 'react';
 import './App.css';
 import MadLibs from './madlibs/MadLibs.js';
 import Story from './components/Story.js';
+import NewStoryForm from './components/NewStoryForm.js';
 
 class App extends Component {
   constructor() {
     super();
 
     this.state = {
-      selectedMadLib: MadLibs[0]
+      selectedMadLib: MadLibs[0],
+      isStoryVisible: false,
     };
+
+    this.updateWord = this.updateWord.bind(this);
   }
 
   // Update the value of a word in the selected
@@ -23,18 +27,34 @@ class App extends Component {
     this.setState({selectedMadLib: updatedMadLib});
   }
 
+  showStory = () => {
+    if (this.state.isStoryVisible) {
+      return(
+        <Story
+          title={ this.state.selectedMadLib.title }
+          text={ this.state.selectedMadLib.getText() }
+          />
+      );
+    }
+  }
+
+  changeStoryVisibility = () => {
+    this.setState({
+      isStoryVisible: true,
+    });
+  }
+
   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
-        */}
-        <Story
-          title={ this.state.selectedMadLib.title }
-          text={ this.state.selectedMadLib.getText() }
+        <NewStoryForm
+          updateWord={this.updateWord}
+          words={this.state.selectedMadLib.words}
+          changeStoryVisibility={this.changeStoryVisibility}
           />
+        {this.showStory()}
       </section>
     );
   }

src/components/NewStoryForm.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// import './NewStoryForm.css';
+
+class NewStoryForm extends Component {
+
+  static propTypes = {
+    updateWord: PropTypes.func.isRequired,
+    words: PropTypes.array.isRequired,
+    changeStoryVisibility:PropTypes.func.isRequired,
+  }
+
+  onFieldChange = (key, value) => {
+    this.props.updateWord(key,value)
+  }
+  onSubmit=(event) => {
+    event.preventDefault();
+    this.props.changeStoryVisibility();
+  };
+
+  render() {
+    let words = this.props.words;
+    let inputs = words.map((word) => {
+          return(
+            <section key={word.key}>
+              <label>{word.label}</label>
+              <input
+               name={word.key}
+               onChange={(event) => { this.onFieldChange(word.key, event.target.value) }}
+               />
+            </section>
+          );
+        });
+
+    return (
+      <section>
+        <form  className="new-story-form">
+        onSubmit={this.onSubmit}
+          {inputs}
+          <input type="submit" />
+        </form>
+      </section>
+    );
+  }
+}
+
+export default NewStoryForm;