react form

import React from 'react'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { formData: [] }
  }
  componentDidMount () {
  // pobieramy dane
    const formData = [
      { attribute: 'firstname', name: 'First Name', type: 'text', required: true },
      { attribute: 'lastname', name: 'Last Name', type: 'text', required: true },
      { attribute: 'email', name: 'Email', type: 'text', required: true },
      { attribute: 'country', name: 'Country', type: 'text', required: false },
      { attribute: 'hireDate', name: 'Hire Date', type: 'date', required: true }
    ].map(f => { return { ...f, value: '' } })
    //   ^ dodaje jeszcze jedno pole zeby mic gdzie trzymac dane
    this.setState({ formData })
  }

  handleChange (event) {
    // tutaj bym zrobil map po formdata i sprawdzal ktory to input i zrobil update value jesli input attribute jest to samo
    console.log(event)
  }

  Send (props) {
    return <button>Send</button>
  // tutaj zrobilbym sprawdzenie czy wszystkie pola sa wypelnione i jesli tak tworze nowy objekt i to wysylam a jesli nie to komunikat
  }
  Input (props) {
    const { attribute, name, type } = props.f
    console.log(props)
    return (
      <div>
        <label>
          {name}:
        </label>
        <br />
        <input id={attribute} name={attribute} type={type} />
      </div>
    )
  }
  render () {
    return (
      <div className='App'>
        <header className='App-header'>
          Pozdro
        </header>
        <form>
          {this.state.formData.map(props => <this.Input f={props} />)}
        </form>
        <this.Send />
      </div>
    )
  }
}

export default App