How to use switch toggle conditionally in render function in reactjs

Question

I'm new to React JS. I have two objects taskData and taskDatafilter. I want to render two of them based on condition. The toggle switch if the switch is turned on then only render taskDatafilter but if it is off then rendered taskData. My code so far is

    import React, { Component } from "react";
import Button from "reactstrap/lib/Button";
import TodoItem from "../TodoItem/TodoItem";
import Switch from '@material-ui/core/Switch';

export default class TodoList extends Component {

    render() {
    const {
      showTaskData,
      clearList,
      handleDelete,
      todoDeleteMsg,
      editTodo,
    } = this.props;
    const isActive = this.props.showTaskData.active;
    let taskData = [];
      let taskDatafilter = [];
    if (showTaskData.length) {
      taskData = showTaskData.map((task) => {
        return (
          <TodoItem
            key={task.id}
            title={task.title}
            description={task.description}
            handleDelete={() => {
              handleDelete(task.id);
            }}
            todoDeleteMsg={todoDeleteMsg}
            editTodo={() => {
              editTodo(task.id, task.title, task.description);
            }}
          />
        );
      });
        taskDatafilter = showTaskData.filter((value)=> value.completed === 1).map((task) => {
            return (
                <TodoItem
                    key={task.id}
                    title={task.title}
                    description={task.description}
                    handleDelete={() => {
                        handleDelete(task.id);
                    }}
                    todoDeleteMsg={todoDeleteMsg}
                    editTodo={() => {
                        editTodo(task.id, task.title, task.description);
                    }}
                />
            );
        });
    }
    return (
      <ul className="list-group my-2">
        <h3 className="text-capitalize">Todo List </h3>
        <div className="d-flex justify-content-between mb-5">
          Task and Description
            <Switch value="on" inputProps={{ 'aria-label': 'Switch A' }}  />{taskDatafilter}
        </div>
        {taskData}
        <Button color="danger" onClick={clearList}>
          Clear all
        </Button>
        <p className="text-danger">{todoDeleteMsg}</p>
      </ul>
    );
  }
}

I am confused to use the switch button with that condition in my code I am badly stuck at this point for 5 hours. Basically I am working on todo app and I want to show a switch button on the front end which if on then show completed task else show active tasks

Answer 1

Bound your list items into parent tag like div or React.Fragment

if (showTaskData.length) {
      taskData = return( <div> {showTaskData.map((task) => 
          <TodoItem
            key={task.id}
            title={task.title}
            description={task.description}
            handleDelete={() => {
              handleDelete(task.id);
            }}
            todoDeleteMsg={todoDeleteMsg}
            editTodo={() => {
              editTodo(task.id, task.title, task.description);
            }}
          />
      )} </div> );
        taskDatafilter =return( <div> {
           showTaskData.filter((value)=> value.completed === 1).map((task) =>
                <TodoItem
                    key={task.id}
                    title={task.title}
                    description={task.description}
                    handleDelete={() => {
                        handleDelete(task.id);
                    }}
                    todoDeleteMsg={todoDeleteMsg}
                    editTodo={() => {
                        editTodo(task.id, task.title, task.description);
                    }}
                />
        ))
        })
    }

Answer 2

all you have to do is to add ternary condition in your jsx like this

In you constructor define you variable

 constructor(props){
      super(props)
      this.state = {
        showDataFilter: true,
      }

And in you jsx use this variable in ternary operator like this

render(
  ...
  {(this.state.showDataFilter)?
     <taskDatafilter/>
    :
     <taskData/>
  }
)