CODEWITHSUNDEEP
reactjs
taylorhamcheese
taylorhamcheese

Reputation: 43

conditionally display mapped props

Currently, I'm listing all tasks in one component. I'd like to make multiple lists and only display the tasks where task.owner === listOwner (which is passed down from the parent component). Should I be doing this outside of the map function? I'm rather new to react, so please let me know if I could be asking this question better or in a better place :)

  render() {
    const { tasks } = this.props.task;
    const { listOwner }  = this.props;
    return(
      <Container style={{marginBottom: 50}}>
        <div>List owner: {listOwner}</div>
        <ListGroup>
          <TransitionGroup className="task-list">
            {tasks.map(({ _id, name, tokenValue, owner }) => (
                <CSSTransition key={_id} timeout={500} classNames="fade">
                  <ListGroupItem>
                    <Button
                      className="remove-btn"
                      color="danger"
                      size="sm"
                      onClick={this.onDeleteClick.bind(this, _id)}
                    >
                      &times;
                    </Button>
                    <div className="inline"><div className="field-label">Task:</div> {name}</div>
                    <div className="inline"><div className="field-label">Value (BRPT):</div> {tokenValue}</div>
                    <div className="inline"><div className="field-label">Owner:</div> {owner}</div>

                    <div className="float-right inline"><MemberDropdown taskId={_id} /></div>
                  </ListGroupItem>
                </CSSTransition>
            ))}
          </TransitionGroup>
        </ListGroup>
      </Container>
    )
  }

Upvotes: 0

Views: 28

Answers (1)

Colin Ricardo
Colin Ricardo

Reputation: 17259

Here are two ways you can do it:

1.) filter() for the items before you map in the render.

or

2.) have a conditional statement in the render.

It depends on the app structure you have, it's kind of hard to tell from what you've posted.

If you have all the data in the parent component, then it makes sense to filter, e.g. 

const completedTasks = tasks.filter(t => t.completed)
const remainingTasks = tasks.filter(t => !t.completed)

Then pass these arrays to your component, e.g.: 

<TaskList items={completedTasks} />
<TaskList items={remainingTasks />

Here's an example: 

import React from "react";
import ReactDOM from "react-dom";

const tasks = [
  { title: "walk the dog", completed: false },
  { title: "get some milk", completed: true }
];

const TaskItem = ({ item }) => {
  return <li>{item.title}</li>;
};

const TaskList = ({ tasks }) => {
  return (
    <ul>
      {tasks.map(t => (
        <TaskItem item={t} />
      ))}
    </ul>
  );
};

function App() {
  const completedTasks = tasks.filter(t => t.completed);
  const remainingTasks = tasks.filter(t => !t.completed);

  return (
    <div className="App">
      Completed
      <TaskList tasks={completedTasks} />
      Remaining
      <TaskList tasks={remainingTasks} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox link here.

Upvotes: 1

Related Questions