title: × TypeError: Cannot read property '0' of undefined
body: <pre><code>const onChangeTourSeasonalDates = (task,dateStrings) =&gt; {
  // console.log(&quot;Seasosnal dates&quot;,dates[0]._d)
  const formState = [{ index: task.index, startRange: dateStrings[0], endRange: 
  dateStrings[1] }];
  
  const newTourSeasonalDate = state.tourSeasonalDates.map(item =&gt; {
    return item.index === formState.index ? formState : item;
  });
  console.log('task is task ', newTourSeasonalDate);
  
  setState({ ...state, tourSeasonalDates: { ...state.tourSeasonalDates, 
   newTourSeasonalDate } });
   };
  
   {state.tourSeasonalDates.map(task =&gt; (
                &lt;DateRangeComponent
                  onChange={()=&gt;onChangeTourSeasonalDates(task)}
                  onClickMinusButton={() =&gt; deleteTourSeasonalDatesRow(task)}
                  key={task.index}
                /&gt;
              ))}
  </code></pre>
  <p>//I was trying to match the index of each row daterangepicker and pass each range data in the state. Here i have daterangecomponent which consist of antd Rangepicker in which i am getting error while using onChange. Since i was trying to pass task index in onchange so that it will match according to the index in each row. Also dataStrings is default onChangePicker for getting date range. Here i want to get the final output as tourSeasonalDates:[{
  index: task.index, startRange: dateStrings[0], endRange:
  dateStrings<a href="https://i.stack.imgur.com/86qsY.jpg" rel="nofollow noreferrer">1</a>}
  ,
  index: task.index, startRange: dateStrings[0], endRange:
  dateStrings<a href="https://i.stack.imgur.com/86qsY.jpg" rel="nofollow noreferrer">1</a>]</p>
  <p>in which each object we get according to the selected date range in row.</p>
  <p><a href="https://i.stack.imgur.com/86qsY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/86qsY.jpg" alt="enter image description here" /></a></p>