React: Have a return statement but "Nothing was returned from render. This usually means a return statement is missing"

Question

I have a component that I'm currently trying to render. I put a return statement but I am still displaying an error.

import React, { useState } from 'react';
import moment from 'moment';
import {FaSpaceShuttle} from 'react-icons/fa';

export const TaskDate = ({ setTaskDate, showTaskDate, setShowTaskDate }) => {

  return (
  showTaskDate && (
    <div className="task-date" data-testid="task-date-overlay">
      <ul className="task-date__list">
        <li>
          <div
            onClick={() => {
              setShowTaskDate(false);
              setTaskDate(moment().format('DD/MM/YYYY'));
            }}

          >
            <span>
              <FaSpaceShuttle />
            </span>
            <span>Today</span>
          </div>
        </li>
       
      </ul>
    </div>
    )
  );
};

Any help would be appreciated!

Answer 1

The problem is that when showTaskDate is undefined you don't render anything, you simply return undefined .

You can change your return to use conditionals and return null to render nothing if there is no showTaskDate set.

export const TaskDate = ({ setTaskDate, showTaskDate, setShowTaskDate }) => {
  return (
    showTaskDate ? (
      <div className="task-date" data-testid="task-date-overlay">
        <ul className="task-date__list">
         ...
        </ul>
      </div>
    ) : null
  );
};