Beginner redux, report error Cannot read property 'map' of undefined

import React from "react";
import DifferentLabels from "./DifferentLabels"

const DifferentLabelsDiv = ({ todos, toggleTodo }) => (
    <div>
        {todos.map(todo =>
            <DifferentLabels
                key={todo.id}
                {...todo}
            />
        )}
    </div>
)

class DifferentLabelsList extends React.Component {

    render(){
        return (
            <div className={"left_layout"}>
                <div>
                    
                </div>
                <DifferentLabelsDiv />
            </div>
        )
    }
}

export default DifferentLabelsList;
import React from "react"
import PropTypes from "prop-types"

const DifferentLabels = ({ onClick, completed, text }) => (
    <div
    >
        {text}
    </div>
);

export default DifferentLabels

Apr.26,2021

const DifferentLabelsDiv = ({ todos = [], toggleTodo }) ...

change it to this


your DifferentLabelsDiv component has a todos attribute, but you did not pass this attribute to this component, so todos is undefined , so you call map method will report an error,
solution:

  1. pass todos attribute
  2. gives the component DifferentLabelsDiv a default todos attribute.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36786-2bffb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36786-2bffb.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?