Redux: Call To Action-creator Returns 'cannot Read Property 'props' Of Undefined'

I'm able to fetch the weather by a given city but can't figure how to delete it afterwards. Being still new to Redux I'm trying to figure which pieces am I missing on this puzzle.

Solution 1:

Try replaceing:

{this.props.weather.map(this.renderWeather)}

With

{this.props.weather.map(this.renderWeather, this)}

The second argument of map is the thisArg - value to use as this when executing callback.

Solution 2:

You need to bind renderWeather function.

classWeatherListextendsComponent{
    constructor(){
        super();
        this.renderWeather = this.renderWeather.bind(this);
    }
    ...
}

Solution 3:

The error message you're getting cannot read property props of undefined means that in this.propsthis is undefined.

It's a common gotcha in react, mainly because this is falling out of context.

What you need to do is bind the renderWeather function to WeatherList in the constructor

constructor() {
   this.renderWeather = this.renderWeather.bind(this)
}

Another alternative is to use arrow functions

class {
   renderWeather = (weatherData) => {
       ...
   }
   ...
}

You might also consider this implementation in you reducer when deleting a city.

[...state].filter((weather) => {
    return weather.id != action.payload.data.id
})

.filter() returns a new array of items that meet the given condition