How to use conditional rendering in reactjs?

Question

I have the following react component which creates a list of Tasks.

The code works ok this.props.data and when the data is empty, no Task appears.

I would like to change the code in a way so that if the array is empty a single text

"list empty"

is displayed instead.

I have tried to create a function for listItems and inside add some logic, but I cannot call it from JXS, example <div>{listItems()}</div> although I am not even sure if this is the correct approach.

Any ideas?

import React, { Component } from 'react';
import Task from './Task.js'

class TasksList extends Component {
   constructor(props) {
       super(props);
   }
   render() {
       const data = this.props.data;
       const listItems = data.map(todo => {
           return <Task
               id={todo.id}
               key={todo.id.toString()}
               title={todo.title}
               onTitleChange={this.props.onTitleChange}
               onTaskDelete={this.props.onTaskDelete}
           />
       });
       return (
           <div>{listItems}</div>
       )
   }
}

export default TasksList;

An Nguyen · Accepted Answer · 2017-08-25 10:25:11Z

1

This should works:

const listItems = data.length == 0 ? "List empty" : data.map(todo => { ... });

answered Aug 25, 2017 at 10:25

An Nguyen

1,47810 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mindaJalaj · Accepted Answer · 2017-08-25 10:38:56Z

You can use something like below, hope this helps.

class TasksList extends Component {
   constructor(props) {
       super(props);
   }
   render() {

       if(this.props.data.length > 0) {
         return (<div>
           {data.map(todo => {
           return <Task
               id={todo.id}
               key={todo.id.toString()}
               title={todo.title}
               onTitleChange={this.props.onTitleChange}
               onTaskDelete={this.props.onTaskDelete}
           />
         });}
       </div>);
       }
       return (
           <div>list empty</div>
       )
   }
}

export default TasksList;

Collectives™ on Stack Overflow

How to use conditional rendering in reactjs?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related