React: Nothing was returned from render

Question

I have a component inside a component in my React app where I map through data in one and render it in another but I keep getting this error Error: Data(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Error: Data(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

My data component:

  const Data = () => {
    return (
      transactions &&
      transactions.map((t) => (
        <Block
          from={t.from_account}
          to={t.to_account}
          type={t.type}
          amount={t.amount}
          currency={"HAT"}
          time={convertedDate}
          key={t.transaction_id}
        />
      ))
    );
  };

Where i'm trying to display it (in the same component):

{loading ? <Loader type="ball-scale-ripple-multiple" /> : <Data />}

Also Block is another separate component (not in the same file), this makes absolutely no sense I am clearly returning what is needed. What could be causing this? How is it fixed?

Answer 1

It looks like the way you created the component, if no transitions were passed, it does return undefined, you could fix it by returning null if transactions is undefined.

This would do the trick:

const Data = () => {
  return (
    !transactions ? null :
    transactions.map((t) => (
      <Block
        from={t.from_account}
        to={t.to_account}
        type={t.type}
        amount={t.amount}
        currency={"HAT"}
        time={convertedDate}
        key={t.transaction_id}
      />
    ))
  );
};