Javascript return values

Question

I have a helper which returns the result of a function:

        TimerCalc =()=>{    
           (...other calculations...)
           const formatedTime = () => {
           return [pad(parseInt(seconds / 60)), pad(seconds % 60)].join(':')
           }
    
        return formatedTime()
        }

In the parent component I recieve that value like this:

  const counter = <TimerCalc resetTimer={reset} runTimer={startStopTimer} />

...which correctly returns the formated Time in the desired format like "00:00"

But I need now to return a second value together with the formatedTime, so I am trying:

return [formatedTime(), secondValue]

Hoping that something like counter[0] would give me the first value and conter[1] the second in the parent component. But it does not.

The problem is that I do not know how to get both values, because doing console.log({counter}) shows me an object, without values:

Object {
  "counter": Object {
    "$$typeof": Symbol(react.element),
    "_owner": FiberNode {
      "tag": 0,
      "key": null,
      "type": [Function Today],
    },
    "_store": Object {},
    "key": null,
    "props": Object {
      "resetTimer": false,
      "runTimer": false,
    },
    "ref": null,
    "type": [Function TimerCalc],
  },
}

Can anyone help, telling me how to do this right and access both values in the parent component? Thx!

Components are not plain objects and shouldn't be used like that — Konrad
– Konrad, Commented Dec 19, 2022 at 12:03
JSX elements are generally used to represent something that will appear in the UI, if all you need is to assign a string/array to a variable, does this need to be in JSX at all? Couldn't it be a regular function? (You can always use that value in the UI separately later) — DBS
– DBS, Commented Dec 19, 2022 at 12:04

Ali Sattarzadeh · Accepted Answer · 2022-12-19 12:07:21Z

2

it seems that you are using react, so you cannot get returned value of component in this way , actually we use custom hook for this kind of case

like this :

const useTimerCalc =({resetTimer,startStopTimer})=>{
  (...other calculations...)
  const formatedTime = () => {
    return [pad(parseInt(seconds / 60)), pad(seconds % 60)].join(':')
  }

  return [formatedTime(), secondValue]
}

and in other component use it in this way :

  const [formatedTime,secondValue] = useTimerCalc({
    resetTimer:reset,
    startStopTimer:startStopTimer
  })

answered Dec 19, 2022 at 12:07

Ali Sattarzadeh

3,6272 gold badges9 silver badges23 bronze badges

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

1 Comment

Carlos del Río Francés Over a year ago

Thanks a lot Ali! That way it works perfectly.

Collectives™ on Stack Overflow

Javascript return values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related