function PostButton(props){

  var style = {

        width:props.width,

        height:24

    }

  return <button style={style} onClick={props.handlePress}>{props.label}</button>

}

​

function PostText(props){

  var style = {

    border: "1px solid black",

    width: 20

  }

  return 

}

​

​

function DisplayTable(props){

  console.log(props.accounts[0])

  return (

    <table>

      <tr><th>Remove</th><th>First Name</th><th>Last Name</th><th>Activity</th><th>Restrictions</th></tr>

      {props.accounts.map((acc)=>{

        return <tr><td><button></button></td><td>{acc[0][0]}</td><td>{acc[0][1]}</td><td>{acc[0][2]}</td><td>{acc[1][0]}</td></tr>

      })}

    </table>

  )

}

​

class SubmitForm extends React.Component{

  constructor(props){

    super(props);

    this.state ={

      firstName: '',

      lastName: '',

      activity: '',

      restrictions_a: false,

      restrictions_b: false,

      restrictions_c: false

​

   // this.setInitialState = this.setInitialState.bind(this)

                }

  this.handleChange = this.handleChange.bind(this)

  this.callBack = this.callBack.bind(this)

  }

  handleChange(event){

    var name = event.target.name;

    var object = this.state

    console.log(object)  

    if(event.target.type=="checkbox"){

      var checked = event.target.checked;

      object[name] = checked;

      this.setState(object)

    }else{

      var value = event.target.value;

      object[name] = value;

      this.setState(object)

  }

  }

  callBack(){

    var temp = {...this.state}

    this.setState(Object.assign(this.state,{

      firstName: '',

      lastName: '',

      activity: '',

      restrictions_a: false,

      restrictions_b: false,

      restrictions_c: false

  }))

   this.props.handlePress(temp);

  }

  componentDidUpdate(){

    console.log("H-hi")

  }

  render(){

    console.log(this.state)

    var array = ["Science Lab","Swimming","Cooking","Painting"];

    return(

      <form>

      <label>First Name</label>

        <input name="firstName" type="text" value ={this.state.firstName} onChange={this.handleChange}/>  

      <label>Last Name</label>

      <input name="lastName" type="text" value ={this.state.lastName} onChange={this.handleChange}/>  

      <label>Select Activity</label>

      <select name="activity" value ={this.state.activity} onChange={this.handleChange}>  

        {array.map( (item)=> <option value={item}>{item}</option>)}

      </select>

      <label>Check all that apply:</label>

      <input name="restrictions_a" type = "checkbox" checked = {this.state.restrictions_a} onChange={this.handleChange}/><label>Dietary Restrictions</label>

      <input name="restrictions_b" type = "checkbox" checked = {this.state.restrictions_b} onChange={this.handleChange}/><label>Physical Disabilities</label>

      <input name="restrictions_c" type = "checkbox" checked = {this.state.restrictions_c} onChange={this.handleChange}/><label>Medical Needs</label>

      <button style={{width:50,height:24}} onClick={this.callBack}>Submit</button>

    </form>

    )

  }

}

​

class App extends React.Component{

  constructor(props){

    super(props)

    this.state ={items: []}

   this.handlePress = this.handlePress.bind(this)

  }

  handlePress(object){

    var item = [...this.state.items].push(object);

    this.setState({items:item})

  }

  render(){

    //console.log(this.state)

    return(

      <div>

      <SubmitForm  handlePress={this.handlePress}/>

      {/*!this.state.items.length==0 && (<DisplayTable accounts ={this.state.items}/>) */ }

      </div>

    )

  }

}

ReactDOM.render(<App />, document.getElementById("root"));

​