The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

Ian8829 (1) [Avatar] Offline
#1
error
[ 87 KB ]
How can I solve this problem?(2~ 2.7 Dispatching Actions)

My source code is in below GitHub address.

My source code is wrong?

I can't progress the book because of this error...

Could you show me the code of this book(2~3 Chapter)?


https://github.com/Ian8829/reduxInAction/tree/master/parnsnip



TypeError: undefined is not an object (evaluating 'tasks.filter')
(anonymous function)
src/components/TasksPage.js:84
81 | )}
82 | <div className="task-lists">
83 | {TASK_STATUSES.map(status => {
> 84 | const tasks = tasks.filter(task => task.status === status)
85 | return (
86 | <TaskList
87 | key={status}
View compiled




hettlage (136) [Avatar] Offline
#2
It seems that you have to replace

            const tasks = tasks.filter(task => task.status === status)
            return (
              <TaskList
                key={status}
                status={status}
                tasks={tasks}
                onStatusChange={this.props.onStatusChange}
              />
            );


with

            const tasks1 = tasks.filter(task => task.status === status)
            return (
              <TaskList
                key={status}
                status={status}
                tasks={tasks1}
                onStatusChange={this.props.onStatusChange}
              />
            );


Will Faurot (8) [Avatar] Offline
#3
Hey, just pulled down your repo and gave the code a spin. hettlage is correct, the error is due to defining a variable `tasks` here: https://github.com/Ian8829/reduxInAction/blob/master/parnsnip/src/components/TasksPage.js#L46, but also using the same variable name later in the component.

You have a bunch of options, but it seems reasonable to either 1) change the variable on line 84 from `tasks` to something like `ts`, or 2) remove `const { tasks } = this.props` from the top of the render function, and do something like:
// ...
const tasks = this.props.tasks.filter(...)
/// ...


Good luck!