CODEWITHSUNDEEP
react-native
General Baguettson
General Baguettson

Reputation: 163

React Native multiple inputs

I am actually making an app for a little job, that consists in taking 3 dates, and calclating multiple other dates from those 3. These are supposed to be dates for routine checks, etc... I have hit a problem though : I can't find how to handle multiple inputs. I have 3 DatePickers, that look like this :

<DatePicker
    dateMes={this.state.dateMes}
    mode="date"
    placeholder="select date"
    format="DD-MM-YYYY"
    minDate="01-01-1950"
    maxDate="01-01-2050"
    androidMode="spinner"
    showIcon={false}
    onDateChange={this.onDateChange}
/>

With the only thing changing is dateMes (becoming dateInit and dateLast). To initiate those i have :

constructor(props) {
    super(props)
    this.state = { dateMes: "01-01-2000" }
    this.state = { dateLast: "01-01-2000"}
    this.state = { dateInit: "01-01-2000" }
}

I am kind of a noob, so it may be a basic problem. My question is : what do i have to change, and what names do i have to change to have 3 different input to work with.

Thanks for the help !

Upvotes: 1

Views: 1441

Answers (1)

Rizal Sidik
Rizal Sidik

Reputation: 989

you can add this function :

onDateChange = (state) => (event,value) => {
  this.setState({
    [state]:value
  });
}

and change your code from :

onDateChange={this.onDateChange}

to :

onDateChange={this.onDateChange('your state name'}

for example : 

onDateChange={this.onDateChange('dateMes')}

Maybe can help you :) Note: you can change your constructor method to this :

constructor(props) {
  super(props)
  this.state = { 
    dateMes: "01-01-2000",
    dateLast: "01-01-2000",
    dateInit: "01-01-2000"
  }
}

i think it's better, good luck :)

Upvotes: 4

Related Questions