React hooks conditional render

Question

I have a functional react component which uses custom hook useTimer.This component receives data from API(via redux store).

function RenderRespond(order) {
  if(order === null) return;
  const {
    buyerName,
    offerDuration,
  } = order;
  const {
    seconds,
    minutes,
  } = useTimer(offerDuration);
  return(
    <div>
      {BuyerName}
      {minutes}:{seconds}
    </div>
  );
}

I only want to render this component when order is not null.The code throws the error that hooks cannot be conditionally rendered.How can I achieve this?

Vencovsky · Accepted Answer · 2019-07-01 14:05:33Z

6

You should call useTimer before the if statement.

Like so:

function RenderRespond(order) {
  const {
    buyerName,
    offerDuration = '', // not sure what the default value will be, but you can change it for your needs
  } = order || {};
  const {
    seconds,
    minutes,
  } = useTimer(offerDuration);

  if(order === null) return null;
  return(
    <div>
      {BuyerName}
      {minutes}:{seconds}
    </div>
  );
}

If you look at the docs the reason why this happens is because if(order === null) return will prevent the hook to be called, but it will be expecting it to be called;

Observations

Maybe you have a typo?

You are destructing buyerName but rendering BuyerName (with capital B).

edited Jul 1, 2019 at 14:05

answered Jul 1, 2019 at 13:53

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

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

2 Comments

johnnash Over a year ago

But if order is null, accessing buyerName will throw an error.

Vencovsky Over a year ago

@johnnash I added order || {}, now your destructing will work fine. I also added offerDuration = '' so it won't be undefined when you use it in useTimer, but you can change it to what you need. I only added empty string because I don't know what is used in useTimer.

Collectives™ on Stack Overflow

React hooks conditional render

1 Answer 1

Observations

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Observations

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related