score:5
your redux store's courses
might be undefined
at the start and hence this.props.courses
becomes undefined
. trying to access .map
of undefined
will give you the error you mentioned above. there are a few ways to fix this:
approach 1 (recommended): set the initial value of the state.courses
to empty array []
in your the reducer. refer to the documentation on reducers to see how to set an initial state: http://redux.js.org/docs/basics/reducers.html.
approach 2: set a default value for props.courses
in mapstatetoprops
.
function mapstatetoprops(state,ownprops){
return {
courses: state.courses || []
};
}
approach 3: check that this.props.courses
is not undefined
or null
before rendering it:
courserow() {
if (!this.props.courses) {
return null;
}
return this.props.courses.map((course)=>{
return(
<div key={course.id}>{course.title}</div>
);
});
}
score:2
your mapstatetoprops
is returning a reducer instead of actual props
that you can use right away. it should probably look like this:
function mapstatetoprops(state,ownprops){
return{
...state.courses
};
}
score:3
in your reducer where are you updating courses?? i can only see users from the code you posted.
const initialstate = {
courses : [],
}
export default function coursereducer(state =initialstate,action){
switch(action.type){
//create a course or update it , else value is
//undefined and your map would throw error.
case 'create_courses':
return object.assign({},state,{
courses : action.user}
);
default:
return state;
}
}
also in your render method you need to check if this value is filled then only run map.
<h3>{this.props.courses.length > 1 ? this.courserow() : null}</h3>
score:3
after modifying the code with the help of both @harkirat saluja and @yang shun. i manages to fix the issue which was initializing courses so i changed my reducer as below
state = [] did the trick!
export default function coursereducer(state = [],action){
switch (action.type) {
case 'create_course':
return [...state,object.assign({},action.course)];
default:
return state;
}
}
Source: stackoverflow.com
Related Query
- Errors while Using map functions in React
- Functions are not valid as react child Error while using Navigate in react router dom
- Uncaught TypeError: this.state.people.map is not a function in react js while using the map function
- I am getting error while installing material ui in cmd for react .I am using this command npm i @material-ui/icons and getting following errors ::
- Using promises in React to wait for functions to finish within JavaScript map function
- Map function renders first react element differently while using tailwind's utility classes
- Triggering the first list item while using List with map in React
- Map is not a function while using react hooks
- How to render react components by using map and join?
- Does React batch state update functions when using hooks?
- React with Typescript -- Generics while using React.forwardRef
- Warning: Functions are not valid as a React child, using a conditional rendering
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- How to show results of a map in two or more columns using react
- Error while deploying react based SSR app, using firebase-functions
- Using ES6 Map with React and/or Redux
- Using Google Map in React Component
- How to render images with React JS using map or loop?
- How to disable strict mode while bundling React using webpack
- When using React Is it preferable to use fat arrow functions or bind functions in constructor?
- React 'cannot read property of undefined' when using map
- What is the difference between arrow functions and regular functions inside React functional components (no longer using class components)?
- Getting error "Path" argument must be string while deploying React - Loadable components sample code in cloud functions
- How to test functions other than render in a React class using jest?
- How do I initialize third party libraries while using react hooks?
- How to loop inside map function using jsx format React JS
- react setState array of object using map doesn't work?
- React functional component - using inline functions for handlers affects performance?
- Field error while using redux form in React js
- Getting an out of memory error while using Create React App and Plotly.js
More Query from same tag
- How to use React refs with new Typescript strictPropertyInitialization option?
- React functional component with non-JSX class has an internal array returning undefined
- Value in array equal to key or value in another array
- Mapping array returns undefined values
- MenuIcon not found in material-ui/icons
- How to create Chai/Mocha unit tests for a ES6 class React component?
- props works incorrectly with componentDidUpdate.(Cash pollution)
- Node modules issue: Only one default export allowed per module
- Add multiple files with onChange function and React Hooks, but singly
- Reactjs - Changing an item in randomized array via button
- How to get react jsx "to: "/profile"" to redirect and load the profile page?
- Rete Library giving error with React JS : ReferenceError: regeneratorRuntime is not defined
- React hook state not change in recursion
- React.js & [...] (spread) syntax
- Detecting which input is focused React hooks
- Single React Component rendering with Babel Standalone with only index.html and Component
- How to select alt+anykey or shift+anykey in react-hotkeys?
- react warning Expected to return a value at the end of arrow function array-callback-return
- In Reactjs how do I update the correct value in the parent state with a callback that's been passed to a nested child component?
- How to make a dynamic website depending on subdomain?
- fetch POST is returning HTTP 415, while curl goes on fine and returns result
- React: Variable after keyname in map function
- React-google-maps zoom issue
- Gatsby Module Federation CORS error and eager consumption issue
- Can I use use* functions (useState,useRef, useContext) in non rendering components?
- Media Queries in Emotion Styled Components
- Having trouble checking if an array has data or is empty in ReactJS
- How to give a Component as a parameter to the react-router in an application start
- React Sort Table Rows by Id
- How to include script tag inside react app based on environment variable