Timer with React cannot read property seconds of undefined

Question

I'm trying to make a timer in React but, I have a problem. The error that I am getting is this:

Uncaught TypeError: Cannot read property 'seconds' of undefined'.

I have tried to understand but, I can't find the problem.

Can someone help me ?

Here is the fiddle : https://jsfiddle.net/q806zeps/17/

Thank you.

I think the problem is here because if I comment the render, it's ok.

<TimerInput 
    value={this.state.seconds} 
    handleChange={this.handleChange} 
/> 
<Minuteur 
    seconds={600} 
    libelle="Pâtes"
/>```

Answer 1

In addition to Levi's answer (as I'm not allowed to comment yet):

Your TimerInput component is trying to read prop seconds (not value), so your render line for it should look like:

<TimerInput seconds={this.state.seconds} handleChange={this.handleChange} />

Answer 2

The problem is that you are trying to access the state and methods of the Minuteur component from the parent component App.

const App = () => {
    return (
    <div>
      <TimerInput value={this.state.seconds} handleChange={this.handleChange} />
      <Minuteur seconds={600} libelle="Pâtes"/>
    </div>
  )
}

this.state.seconds and this.handleChange refer to attributes on the Minuteur component. Since it seems like TimerInput and Minuteur need to share some state, you have a couple options.

1. Combine the TimerInput and Minuteur components into one so they have the same state.
2. Create a wrapping component that contains both TimerInput and Minuteur and move the shared state (e.g. state.seconds) to that component.

The approach for option 2 would look roughly like this:

class Wrapper extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      seconds: 0
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      seconds: event.target.value
    })
  }

  render() {
    return (
      <div>
        <TimerInput value={this.state.seconds} handleChange={this.handleChange} />
        <Minuteur seconds={this.state.seconds} libelle="Pâtes"/>
      </div>
    )
  }


const App = () => {
  return (
    <div>
      <Wrapper />
    </div>
  )
}

Answer 3

Just add return to the Wrapper's render:

render() {
  return(
    <div>
      <TimerInput seconds={this.state.seconds} handleChange={this.handleChange} />
      <Minuteur seconds={this.state.seconds} libelle="Pâtes"/>
    </div>
  )
}

Answer 4

Quick and dirty solution - set initial Wrapper seconds state to anything but 0 (like 600 you had in your original fiddle):

this.state = { 
  seconds: 600
}