title: Why am i getting a NaN error in my react app?
body: <p>Been looking through this for a while. cant understand why i am getting the error. this is in a react app, with a wave form, the play skip forwards and backwards buttons all work but clicking on the notes doesn't, they're meant to skip to the corresponding time stamp when click. when i click on a note at the moment it says that i get a NaN error in the console. the error seems to be stemming from the bottom div. any help would be much appreciated.</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Wavesurfer from "react-wavesurfer";
  import audio from "./PM1.mp3";
  
  require("wavesurfer.js");
  
  export default class Waveform extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        playing: false,
        pos: 0
      };
      this.handleTogglePlay = this.handleTogglePlay.bind(this);
      this.handlePosChange = this.handlePosChange.bind(this);
    }
  
    handleTogglePlay() {
      this.setState({
        playing: !this.state.playing
      });
    }
    handlePosChange(e) {
      this.setState({
        pos: e.originalArgs ? e.originalArgs[0] : +e.target.value
      });
    }
    render() {
      const waveOptions = {
        progressColor: "darkorange",
        waveColor: "orange"
      };
      let notes = this.props.notes;
      return (
        &lt;div&gt;
          &lt;Wavesurfer
            audioFile={audio}
            pos={this.state.pos}
            onPosChange={this.handlePosChange}
            playing={this.state.playing}
            options={waveOptions}
          /&gt;
  
          &lt;button
            value={this.state.pos - 5}
            onClick={value =&gt; this.handlePosChange(value)}
          &gt;
            SkipBack
          &lt;/button&gt;
  
          &lt;button onClick={this.handleTogglePlay}&gt;PLAY&lt;/button&gt;
  
          &lt;button
            value={this.state.pos + 5}
            onClick={value =&gt; this.handlePosChange(value)}
          &gt;
            SkipForward
          &lt;/button&gt;
  
          &lt;h4&gt;{this.props.pos}&lt;/h4&gt;
          &lt;div className="form-group col-xs-4"&gt;
            &lt;label htmlFor="simple-pos"&gt;Position:&lt;/label&gt;
            &lt;input
              name="simple-pos"
              type="number"
              step="0.01"
              value={this.state.pos}
              onChange={this.handlePosChange}
              className="form-control"
            /&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
            &lt;header className="App-header"&gt;Notes&lt;/header&gt;
            {notes.map(notes =&gt; (
              &lt;button
                className="yay2"
                value={this.state.pos + notes.time}
                onClick={value =&gt; this.handlePosChange(value)}
              &gt;
                &lt;h3&gt;
                  Time : {notes.timecode} - Description : {notes.description}
                &lt;/h3&gt;
              &lt;/button&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And the notes are formatted like so:</p>
  
  <pre><code>  notes:[
      {
        timecode: "1:00",
        time: 60,
        description: "Note 1"
      },
      {
        timecode: "2:00",
        time: 120,
        description: "Note 2"
      },
    ]
  </code></pre>