React handleClick in parent

Question

Had some problem before setting accessible instance variable in parent from child.

As it turns out you cannot SET parent vars from child in the manner that i was going for. I proceeded and successfully called setState, but the state itself seem to change each time i set it, im not overwriting the Howler state (this.state.howler), i just instantiate another one...

Didn't solve my original problem with music that plays simultaneously.

The state shouldn't change and the previous state should(?) be overwritten when

this.setState({ howler: howlerInstance, });

in SongContainer is called? Don't get it at all.

    // Components
        var SongContainer = React.createClass({
            getInitialState: function() {
                return {
                    data: [],
                    howler: 0,
                };
            },
            handleUserInput : function(howlerInstance) {
                this.state.howler.stop();

                this.setState({
                    howler: howlerInstance,
                });

                this.state.howler.play();
            },
            loadTrackListFromServer: function() {
                $.ajax({
                url: this.props.url,
                dataType: 'json',
                cache: false,
                success: function(data) {
                    this.setState({data: data.playlist});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
                });
            },
            componentDidMount: function() {
                this.loadTrackListFromServer();
                setInterval(this.loadTrackListFromServer, this.props.pollInterval);

                this.state.howler.stop().play();
            },
            render: function() {
                return (
                <div className="container songsContainer">
                    <SongList howler={this.state.howler} onUserInput={this.handleUserInput} data={this.state.data} />
                </div>
                );
            }
        });

        var SongList = React.createClass({
            handleChange: function(howlerInstance) {
                this.props.onUserInput(
                    howlerInstance
                );
            },
            render: function() {
                var i = 0;
                var self = this;
                var trackNodes = this.props.data.map(function(track, i) {
                    return (
                        <Song onUserClick={self.handleChange} key={i} >
                            {track}
                        </Song>
                    );
                    i++;
                });

                return (
                    <div className="row">
                        <div className="col-sm-12">
                            <div className="list-group-wrapper">
                                <div className="list-group">
                                {trackNodes}
                                </div>
                            </div>
                        </div>
                    </div>
                );

            }
        });

        var Song = React.createClass({
            handleClick : function(e) {
                console.log(2);
                e.preventDefault();
                var song = new Howl({
                    urls: [e.target.href]
                });

                this.props.onUserClick(
                    song
                );
            },
            render: function() {
                return (
                <a href={'/static/mp3s/' + this.props.children.toString()} onClick={this.handleClick} className="list-group-item song">
                    {this.props.children}
                </a>
                );
            }
        });

        ReactDOM.render(
            <SongContainer url="/playlist" pollInterval={2000} />,
            document.getElementById('content')

Answer 1

There are quite a few things that are incorrect in your code. I suggest going to the official React documentation and starting with the tutorial there.

For my answer I will attempt to address the concept of passing down functions from parent to child.

var SongList = React.createClass({
  logTrack: function(track) {
    console.log(track)
  }

  render: function () {
    var trackNodes = this.props.data.map(function(track, i) {
      return (
        <Song
          key={i} 
          handleClick={this.logTrack} // pass function through props
         >
          {track}
        </Song>
      );
    });

    return (
      <div className="row">
        {trackNodes}
      </div>
    );
  }
})

var Song = React.createClass({
  render: function () {
    <a onClick={ function () { this.props.handleClick('some value') }>
      {this.props.children}
    </a>
  }
})