Array.map function returns undefined or [undefined]

Question

Hey guys i am a little bit puzzled here . What am i doing wrong i have and object array in a external file that is looking something like this :

import moment from "moment";

export default [{
    filterOn: "startDate",
    startDate: moment("01/01/2013", "DD/MM/YYYY").startOf("day"),
    endDate: moment().startOf("day")
}];

Then i have my array imported via props like : props.datePickerDefinition

Into a separate file i am fetching the array and i try to extract the value from the array to some states via useState and setState

const [fromToDatePickerColumn, setFromToDatePickerColumn] = useState();
const [dateFrom, setDateFrom] = useState();
const [dateTo, setDateTo] = useState();

My goal is to use the useEffect function and update the state of these three elements with a switch case :

  useEffect(() => {
    props.datePickerDefinition.map((date) => {
        switch (typeof date) {
            case 'string':
                setFromToDatePickerColumn(date.fromToDatePickerFilterOn)
            break;

            case'moment' :
                setDateFrom(date.startDate)
                setDateTO(date.endDate)

        }
    })
})

So i have two questions first . Can i use a switch case to check on a moment object ? And the second and most important one is why when i extract the value from the .map function i recieve undefined , but if i check the value by props.datePickerDefinition.map((date) => console.log(date)) i see it . Can someone give me a hand i will be very gratefull to understand what am i doing wrong .

I have tried with the .forEach function :

 const array1 = [{first:'a', second:'b', third:'c'}]; const test = array1.forEach(element => element.first); console.log(test)

And also .map :

 const array1 = [{first:'a', second:'b', third:'c'}]; const test = array1.map(element => element.first); console.log(test)

But in this case it returns me ["a"] and i need only the value and not the Array

Answer 1

You need to again iterate over the date to set the states. But map won't fit here. Try below code:

useEffect(() => { 

 props.datePickerDefinition.forEach(date =>{
   for(let key in date){
     const dateItem = date[key];
     switch (typeof dateItem) {
      case 'string':
          setFromToDatePickerColumn(date.filterOn);
      break;

      case 'object' :
          setDateFrom(date.startDate);
          setDateTo(date.endDate);
          break;
      default: break;

    }
   }
 })
})

Answer 2

在地图中的 switch case 内添加 return 语句