How to access this value in the component?

JavaScript
1

Hi all.
Basically I’ve been trying to access {count} in the and components
because that value is needed to set the timer start value when it reaches 00:00

codepen

This is for the 25+5 clock. Yes, I asked a few times in the forum already, in case anybody remembers. I’m trying a different approach.
Now I feel I need to restart JS, react and redux. :frowning:

2

Put thr counts in the parent (App) and pass them down to the components that use them. Fyi, you don’t need Redux here, it will just overcomplicate things.

3

Thanks, I tried that , but I’ve not been able to pass another prop via useState to the first array element :

const [props.count, setcount] = React.useState(props.breaks);

Also, this is just not react, not redux right? I don’t think I’m using redux in this codepen,but then again I’m regressing back to the basics :stuck_out_tongue:

4

Mention of redux was just from your initial post, not the actual Codepen, sorry for the misunderstanding.

This just isn’t valid JS: the useState function returns an array with two values (one is the current value, one is the function to set a new value).

With const [props.count, setcount] = you are trying to assign two variables, except that first variable name isn’t valid JS

So just as a concrete, simplified example (this is not quite how it actually works, bit close enough):

function useState (initialValue) {
  let state = initialValue;
  let setState = (newValue) => {
    state = newValue;
    ...rerender...
  }

  return [state, setState];
}

So

const [state, setState] = useState(1);
// The variable state is 1
setState(2)
// The variable state is 2

state and setState are just the names you want to call those variables

props.count is not a valid variable name: I can understand what you’re trying to do, but you’re misunderstanding what this is doing, and forgetting some basic JS I think.

So normally like this (pseudocode)

Timer (props: timer):
    # render time


AdjustSession (props: ,session, setSession)
  # render  and use the setBreak callback
  # on the controls to adjust value.

AdjustBreak (props: break, setBreak)
  # render break and use the setBreak callback
  # on the controls to adjust value.

App:
  state/setState: break
  state/setState: session
  state/setState: timer
  state/setState: useBreaks
  etc

  useEffect():
    # logic to update timer

  return:
    <Timer timer={timer} />
    <AdjustBreak break={break} setBreak={setBreak} />
    <AdjustSession session={session} setSession={setSession} />
    # whatever else
1 Like