CODEWITHSUNDEEP
reactjstypescript
GoonGamja
GoonGamja

Reputation: 2286

How to resolve typescript error "Not all code paths return a value." in function in React?

interface ITimer {
  minutes: number,
  seconds: number,
  completed: boolean
};

const renderTimer = ({ minutes, seconds, completed }: ITimer)  => {
  if (completed) {
    console.log('time is up')
  } else {
  return <em>{minutes}:{seconds}</em>
  }
};

after I set the type of minutes, seconds and completed argument in renderTimer function, I get a yellow line error under ({ minutes, seconds, completed }: ITimer) => { saying

var completed: boolean
Not all code paths return a value.

this error occurs because the function does not return the value of completed.

How can I tell this function that minutes and seconds are only returned value using typescript?

Upvotes: 0

Views: 437

Answers (1)

mikenlanggio
mikenlanggio

Reputation: 1137

You have to return something on if condition.

interface ITimer {
  minutes: number,
  seconds: number,
  completed: boolean
};

const renderTimer = ({ minutes, seconds, completed }: ITimer)  => {
  if (completed) {
    console.log('time is up')
    return null; //or <></>
  } else {
  return <em>{minutes}:{seconds}</em>
  }
};

Upvotes: 1

Related Questions