React - TypeError: this.props.courses.map is not a function
Assumptions:
state.courses
is initially an empty array - from course.reducer.js- You don't call
fetchCourses()
action the first time you are rendering your view - Even if you call
fetchCourses()
there is no problem as long ascourses
in server.js is an array (the array in the response replaces the initialstate.courses
)
Flow:
Now I assume the first render is successful and React displays the <input type="text">
and submit
button. Now when you enter the title and click on the submit
button, the onSave()
method triggers the createCourse()
action with parameter that is more or less similar to { title: 'something' }
.
Then you serialize the above mentioned param and send to the server (in course.actions.js -> createCourse()
) which in turn returns a response that looks like {response: 200}
(in server.js). Response field is an integer and not an array! Going further you call loadCourses()
with the object {response: 200}
which triggers the courseReducer
in course.reducer.js
The courseReducer()
replaces state.courses
(which is [] acc. to assumption) with an integer. And this state update triggers a re-render and you end up calling map()
on an integer and not on an array, thus resulting in TypeError: this.props.courses.map is not a function
.
Possible Solution:
- Return a valid response from serve.js (i.e. return the
course
object the endpoint is called with), or - Update your reducer to add the new course object into the existing
state.courses
array, like,return [...state, action.response]
Update:
Based on OP's comment, if what you want to do is send the new course object to the server, validate it and send success (or error) and based on response add the same course object to the previous list of courses, then you can simply call loadData()
with the same course
object you called createCourse()
with and (as mentioned above) inside your reducer, instead of replacing or mutating the old array create a new array and append the course object to it, in es6 you can do something like, return [...state, course]
.
Update 2:
I suggest you go through Redux's Doc. Quoting from Redux Actions' Doc
Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.
The createCourse()
action is called with a payload which is more-or-less like,
{title: 'Thing you entered in Text Field'}
, then you call your server with an AJAX-request and pass the payload to the server, which then validates the payload and sends a success (or error) response based on your logic. The server response looks like, {response: 200}
. This is end of the createCourse()
action. Now you dispatch()
loadCourses()
action from within createCorse()
, with the response you received from the server, which is not what you want (based on your comments). So, instead try dispatch()
ing the action like this (try renaming response
param, it's a bit confusing)
//.....
.then(data => {
dispatch(loadCourse(response)); // the same payload you called createCourse with
})
//.....
Now, loadCourse()
is a very basic action and it simply forwards the arguments, which Redux uses to call your reducer
. Now, in case you followed the previous discussion and updates how you call loadCourse()
, then the return from loadCourse()
looks like
{
type: REQUEST_POSTS,
response: {
title: 'Thing you entered in Text Field',
}
}
which is then passed onto your reducer
, specifically your courseReducer()
.
Again quoting from Redux Reducers' Doc
Actions describe the fact that something happened, but don't specify how the application's state changes in response. This is the job of reducers.
The reducer
must define the logic on how the action should impact the data inside the store
.
In your courseReducer()
, you simply returns the response
field inside the action
object and [expect] Redux to auto-magically mutate your state! Unfortunately this is not what happens :(
Whatever you return from the reducer, completely replaces whatever thing/object was there before, like, if your state looks like this
{ courses: [{...}, {...}, {...}] }
and you return something like this from your reducer
{ title: 'Thing you entered in Text Field'}
then redux will update the state to look like
{ courses: { title: 'Thing you entered in Text Field'} }
state.courses is no longer an Array!
Solution:
Change your reducer to something like this
export default function courseReducer(state = [], action) {
switch (action.type) {
case 'REQUEST_POSTS':
return [...state, action.response]
default:
return state
}
}
Side Note: This is may be confusing at times, so just for the sake of record, state
inside courseReducer()
is not the complete state but a property
on the state
that the reducer
manages. You can read more about this here