CODEWITHSUNDEEP
javascripthtmlreactjs
effydev
effydev

Reputation: 618

React: Nothing was returned from render

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.

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?

Upvotes: 0

Views: 105

Answers (1)

Dori Lahav Waisberg
Dori Lahav Waisberg

Reputation: 970

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}
      />
    ))
  );
};

Upvotes: 1

Related Questions