How to dynamically create two inputs placeholder in render ReactJS - reactjs

Question

My class is calculating the hours between two places given the hour and minute at each place. I would like to change the <Input> part such that I don't have to repeat myself. The function time is taking two parameters the "hour" and the "minute". I tried but could not figure out. Please help.
updateTime(time, value){
let clock = this.state.time;
clock[time] = value;
this.setState(clock);
}
render(){
return(
<div>
<Card>
<CardBody>
<InputGroup>
<InputGroupAddon addonType={"prepend"}> Hour Origin</InputGroupAddon>
<Input placeholder=“1” onChange={(event)=> this.updateTime(‘hour’,event.target.value)}/>
<InputGroupAddon addonType={"prepend"}>Minute Origin</InputGroupAddon>
<Input placeholder=“1” onChange={(event)=> this.updateTime(‘minute’, event.target.value)}/>
</InputGroup>
<InputGroup>
<InputGroupAddon addonType={"prepend"}> Hour Destination</InputGroupAddon>
<Input placeholder=“1” onChange={(event)=> this.updateTime(‘hour’,event.target.value)}/>
<InputGroupAddon addonType={"prepend"}>Hour Destination</InputGroupAddon>
<Input placeholder=“1” onChange={(event)=> this.updateTime(‘minute’, event.target.value)}/>
</InputGroup>
</CardBody>
</Card>
</div>
)
}

Answer 1

You can package the InputGroups in components and then render the components.
Here's an example:
const HourMinuteInputGroup = props => {
const { locationName, updateTime } = props;
return (
<InputGroup>
<InputGroupAddon addonType={"prepend"}>Hour { locationName }</InputGroupAddon>
<Input placeholder="1" onChange={ event => updateTime('hour',event.target.value) }/>
<InputGroupAddon addonType={"prepend"}>Minute { locationName }</InputGroupAddon>
<Input placeholder="1" onChange={ event => updateTime('minute', event.target.value) }/>
</InputGroup>
)
}
Then your original render becomes:
render(){
return(
<div>
<Card>
<CardBody>
<HourMinuteInputGroup locationName="Origin" updateTime={ this.updateTime }/>
<HourMinuteInputGroup locationName="Destination" updateTime={ this.updateTime }/>
</CardBody>
</Card>
</div>
)
}