Search code examples
javascriptreactjsfunctiondefault-value

cannot read property of undefined using default value


I have a model that gets some data and filters. When the app starts I want to have all filters equal to true. I have set a default value but I still get the following error.

const model = (data, predictions, { placeFilter = true, startDateFilter = true, endDateFilter = true }) => {
   const getData = () => data.filter(placeFilter).filter(startDateFilter).filter(endDateFilter)
}
TypeError: Cannot read properties of undefined (reading 'placeFilter')
    at model (model.js:1)
    at init (index.js:15)

Solution

  • const model = (data, predictions, { placeFilter = true, startDateFilter = true, endDateFilter = true }) => {
       const getData = () => data.filter(placeFilter).filter(startDateFilter).filter(endDateFilter)
    }
    

    You cannot call the above model function by passing two arguments like model([], []) as JavaScript will try to destructure the third argument which is undefined.

    You can do this instead:

    const model = (data, predictions, { placeFilter = true, startDateFilter = true, endDateFilter = true } = {}) => {
      console.log(placeFilter, startDateFilter, endDateFilter)
    }
    
    model([], [])
    model([], [], { placeFilter: false })


    BTW Assuming data is an array and you're trying to use Array.prototype.filter, filter should be called with a callback function that returns a boolean but you're directly passing booleans to all filters.