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

Would you need to return something from the map? As I see, you don't return anything. If I see a map function and it doesn't return anything, it confuses me. A forEach would be better if you don't want to return anything — Vince Varga
– Vince Varga, Commented Oct 6, 2020 at 9:12
Basically the fromToDatePickerColumn has to be setted to "startDate" ... from the data from the array and so on and forth , but in my case is returning me undefined — PandaMastr
– PandaMastr, Commented Oct 6, 2020 at 9:15
And did you verify that the typeof date returns "moment"? Does it not return "object"? — Vince Varga
– Vince Varga, Commented Oct 6, 2020 at 9:16
Ah yes i have to check on object not on moment , but never the less if i try to const test = props.datePickerDefinition.forEach((date) => date.filterOn) the result is still undefined .... i don't get it — PandaMastr
– PandaMastr, Commented Oct 6, 2020 at 9:19
If you know the array has only one element, you could just const test = array1.map(element => element.first)[0]; or even better array1[0].first — Vince Varga
– Vince Varga, Commented Oct 6, 2020 at 9:32

Rohitha · Accepted Answer · 2020-10-06 10:39:24Z

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;

    }
   }
 })
})

answered Oct 6, 2020 at 10:39

Rohitha

7493 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PandaMastr Over a year ago

Yeah mate this has done the job . So i get it know after the first iteration i have iterate on the date also . Thanks for the help . Cheers !

Piyush Rana · Accepted Answer · 2020-10-06 09:46:48Z

0

Add return statement inside switch cases in your map

answered Oct 6, 2020 at 9:46

Piyush Rana

6675 silver badges8 bronze badges

Collectives™ on Stack Overflow

Array.map function returns undefined or [undefined]

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related