title: ReactJS remove child element created through count
body: <p>I have two components, a TrackSection(the Parent element) which has a button that creates a TrackItem(child) every time it is clicked. The child elements are built through a variable numTracks which increments every time the button is clicked. The add button works fine but i'm having issues deleting a TrackItem from the array. I tried referencing the track_items directly but it won't let me.</p>
  <p>I'm very new to React and Frontend development. Any other tips would be appreciated!</p>
  <p>TrackSection.js</p>
  <pre><code>class TrackSection extends Component {
    constructor(props) {
      super(props);
      this.state = {
        numTracks: 0,
      };
    }
  
    onAddTrack = () =&gt; {
      this.setState({
        numTracks: this.state.numTracks + 1,
      });
    };
  
    onDeleteTrack = () =&gt;{
     //????
    };
  
  
    render() {
      const track_items = [];
      for (var i = 0; i &lt; this.state.numTracks; i += 1) {
        track_items.push(&lt;TrackItem key={i} id={i} onDeleteTrack = {this.onDeleteTrack(i)}/&gt;);
      }
  
      return (
        &lt;div&gt;
          &lt;Button onClick={this.onAddTrack}&gt;
              +new track
          &lt;/Button&gt;
          {track_items}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>TrackItem.js</p>
  <pre><code>class TrackItem extends Component{
      constructor(props){
          super(props);
          this.state = {
              id: this.props.id,
              name: '',
          }
      }
  
      render(){
      var onDeleteTrack = this.props.onDeleteTrack
      return(
          &lt;Grid container direction=&quot;row&quot;&gt;
              &lt;Grid item direction=&quot;column&quot;&gt;
              //Dummy 
              &lt;/Grid&gt;
              &lt;button onClick={() =&gt; onDeleteTrack(this.props.id)}&gt;Delete&lt;/button&gt;
          &lt;/Grid&gt;
          );
  }}
  </code></pre>