React

by armakarma

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

.box {
  border: 2px solid black;
  display: flex;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    adresses:[
  {
    "id": 1,
    "address": "address 1",
  },
  {
    "id": 2,
    "address": "address 2",
  },
  {
    "id": 3,
    "address": "address 3",
  },
  {
    "id": 4,
    "address": "address 4",
  }
],
    	arrayOfAddresses: [
        {
          datetime: "10.05.2019 14:00",
          position_id: 1,
          contact: "",
          address_id: "",
          new_address: "",
        },
      ],
     
    }
  }
  
  addNewInputs() {
		
    let newInputValues = {
      datetime: "10.05.2019 14:00",
      position_id: 1,
      contact: "",
      address_id: "",
      new_address:"",
      
    }
    this.setState(prevState => ({
      arrayOfAddresses: [...prevState.arrayOfAddresses, newInputValues],
    }))
  }
  
deleteInput(idx) {
    console.log("idx", idx)

    let tempObj = this.state.arrayOfAddresses

    tempObj.splice(idx, 1)
    this.setState(prevState => ({
      arrayOfAddresses: tempObj,
    }))
    console.log(tempObj)
  }  
  
onChooseAddress(e, idx) {
	
     let tempObj = this.state.arrayOfAddresses
    
    tempObj[idx]["new_address"] = e.target.value
     console.log(tempObj)
    /* this.setState({
      arrayOfAddresses: tempObj,
    })  */
  }
  
  render() {

    return (
      <div>
        {this.state.arrayOfAddresses.map((item,idx)=>{
        return(

	<div key={idx}>

          <input
            name="contact"
            onChange={(e) => this.onChooseAddress(e)}
          />
          <button onClick={() => this.deleteInput(idx)}> x</button>
	</div>
        
          
        
        )
        })}
        <button  onClick={() => this.addNewInputs()}> Add new input </button>
      </div>
    )
  }
}

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