CODEWITHSUNDEEP
reactjsreact-datepicker
Matthew
Matthew

Reputation: 57

React-Datepicker handleChange with multiple name attributes

I have 6 form inputs that are using React-Datepicker. I need to use handleChange() to setState 6 times, but I do not understand how to get the name attribute dynamically from each form input because 'date' doesn't contain any other data when passing it through the function. I've tried passing 'name', but it doesn't work. The same goes for handleSelect()

this.state = {
  dateOne: new Date(),
  dateTwo: new Date(),
  dateThree: new Date(),
  dateFour: new Date(),
  dateFive: new Date(),
  dateSix: new Date()
}

handleChange(date) {
  this.setState({ ...this.state, ?????: date });
}

handleSelect(date) {
  this.setState({ ...this.state, ?????: date });
}

<form>
  <DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateTwo"
    selected={this.state.dateTwo}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateThree"
    selected={this.state.dateThree}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
 <DatePicker
    name="dateFour"
    selected={this.state.dateFour}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateFive"
    selected={this.state.dateFive}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
  <DatePicker
    name="dateSix"
    selected={this.state.dateSix}
    onSelect={this.handleSelect}
    onChange={this.handleChange}
  />
</form>

I've also tried this: https://github.com/Hacker0x01/react-datepicker/issues/242 without any luck.

Any help would be awesome!

Upvotes: 6

Views: 6686

Answers (3)

Guy Kouakou
Guy Kouakou

Reputation: 381

Or you could do this

<DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={(date) => {
        date.name = 'dateOne';// add name to object to return
        this.handleChange(date);
    }
  />

handleChange(date) {
    this.setState({
        [date.name]: data
    });
}

Upvotes: 0

Ertan Hasani
Ertan Hasani

Reputation: 1773

You can try like this:

<DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 'dateOne')} //pass name as string
  />

handleChange(date, name) {
    this.setState({
        [name]: data
    });
}

So you pass the name as string, since you can't access target.name and then update state by name you receive [name]

Upvotes: 6

asif.ibtihaj
asif.ibtihaj

Reputation: 391

try this code

handleChange(date, flag) {
   if(flag===1)
   {
      this.setState({
         dateOne: date
      })
   }
   if(flag===2)
   {
      this.setState({
         dateTwo: date
      })
   }
   if(flag===3)
   {
      this.setState({
         dateThree: date
      })
   }
   if(flag===4)
   {
      this.setState({
         dateFour: date
      })
   }
   if(flag===5)
   {
      this.setState({
         dateFive: date
      })
   }
   if(flag===6)
   {
      this.setState({
         dateSix: date
      })
   }
}

......

<form>
<DatePicker
    name="dateOne"
    selected={this.state.dateOne}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 1)}
  />
  <DatePicker
    name="dateTwo"
    selected={this.state.dateTwo}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 2)}
  />
  <DatePicker
    name="dateThree"
    selected={this.state.dateThree}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 3)}
  />
 <DatePicker
    name="dateFour"
    selected={this.state.dateFour}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 4)}
  />
  <DatePicker
    name="dateFive"
    selected={this.state.dateFive}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 5)}
  />
  <DatePicker
    name="dateSix"
    selected={this.state.dateSix}
    onSelect={this.handleSelect}
    onChange={(date)=>this.handleChange(date, 6)}
  />
</form>

Upvotes: -1

Related Questions