How to stay DRY in React?

Question

Hello everyone,

I am trying to build a simple to-do app based on one of treehouse courses (Interactive Web Pages with JavaScript).

I store all my tasks in an array like this:

var TASKS = [
  {
    name: "Pay Bills",
    completed: false,
    id: 1,
  },
  {
    name: "Go shopping",
    completed: false,
    id: 2,
  },
  {
    name: "Pick up something",
    completed: false,
    id: 3,
  },
  {
    name: "Drink Coffee",
    completed: true,
    id: 4,
  },
];

and I want to render them in separate sections (to-do, done) like this:

  render: function() {
    return (
      <div className="to-do">

        <Section title={this.props.title}>
          <AddTodoForm onAdd={this.onTodoAdd} />
        </Section>

        <Section title="to-do">
          <ul className="tasks-list">
            {this.state.tasks
            .filter(function(task, index) {
              return task.completed === false;
            })
            .map(function(task, index) {
              return(
                <Task
                  name={task.name}
                  key={task.id}
                  completed={task.completed}
                  onCompleted={function() {this.onCompletedTask(index)}.bind(this)}
                  onRemove={function() {this.onRemoveTask(index)}.bind(this)}
                />
              );
            }.bind(this))}
          </ul>
        </Section>

        <Section title="done">
          Here I want to render only done tasks
        </Section>
      </div>
    );
  }

My question is, what is the best way how to render the done tasks without repeating the whole filter/map function?

Thanks for your advice, Jakub

Answer 1 · 2016-12-26T23:29:57Z

December 26, 2016 11:29pm

You could break out the anonymous function in map(), either as a member of the class or assigning it to a variable in the render method. Then it could be reused for both. You could also do a function that takes in the todos and an areCompleted boolean then returns the result of filter and map together.

Welcome to the Treehouse Community

Looking to learn something new?

Jakub Kašpar

Jakub Kašpar

How to stay DRY in React?

1 Answer

Seth Kroger

Seth Kroger