const userAddresses=[
      	{
        	id:1,
        	firstname: "Name1",
          lastname:"Lastname1",
          city:"Chicago",
          email:"name1lastname1@example.com",
          postcode:"123-456",
          company:"Name1 company",
          telephone:"444-444-444"
        },{
        	id:2,
        	firstname: "Name2",
          lastname:"Lastname2",
          city:"London",
          email:"name2lastname2@example.com",
          postcode:"122-457",
          company:"Name2 company",
          telephone:"555-555-555"
        },
        {
        	id:3,
        	firstname: "Name3",
          lastname:"Lastname3",
          city:"New York",
          email:"name3lastname3@example.com",
          postcode:"234-337",
          company:"Name3 company",
          telephone:"777-577-755"
        }]

class FormApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	user_address:
      	{
        	id:userAddresses[0].id,
        	firstname:userAddresses[0].firstname,
          lastname:userAddresses[0].lastname,
          city:userAddresses[0].city,
          email:userAddresses[0].email,
          postcode:userAddresses[0].postcode,
          company:userAddresses[0].company,
          telephone:userAddresses[0].telephone,
        },
        selectedValue:userAddresses[0].id,
        outputAddress:{}
    }

    this.onSelectChange=this.onSelectChange.bind(this);
    this.handleInputChange=this.handleInputChange.bind(this);
  }

  onSelectChange(e){
  	this.setState({selectedValue:e.target.value})
    const shippingAddressID=e.target.value;
  	const shippingAddress = userAddresses.filter(address => address.id == shippingAddressID);
    this.setState({user_address:shippingAddress})
  }

  handleInputChange(e){
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
  const { user_address, selectedValue, outputAddress } = this.state;
    return (
      <div>
        <h2>Shipping data:</h2>
        <select value={selectedValue} onChange={this.onSelectChange}>
          {userAddresses.map((address,i) => <option value={address.id} key={i}>{address.city}, {address.postcode}</option>)}
        </select>
        <br/><br/>
        <form>
          <label>Firstname:</label>
          <input type="text" value={user_address.firstname} onChange={this.handleInputChange}></input>
          <label>Lastname:</label>
          <input type="text" value={user_address.lastname} onChange={this.handleInputChange}></input>
          <br/>
          <label>Email:</label>
          <input type="text" value={user_address.email} onChange={this.handleInputChange}></input>
          <br/><br/>
          <label>City:</label>
          <input type="text" value={user_address.city} onChange={this.handleInputChange}></input>
          <br/><br/>
          <label>Postcode:</label>
          <input type="text" value={user_address.postcode} onChange={this.handleInputChange}></input>
          <br/><br/>
          <label>Telephone:</label>
          <input type="text" value={user_address.telephone} onChange={this.handleInputChange}></input>
          <button onClick={e => this.setState({outputAddress:user_address})}>Send form</button>
        </form>
      </div>
    )
  }
}

ReactDOM.render(<FormApp />, document.querySelector("#app"))