title: Change prop of child component when s
body: <p>I'm building my site with Gatsby and I'm trying to change the URL prop of the Plyr component when a user clicks on a lesson title. Right now the URL is set in the <code>this.state</code> with data pulling from a GraphQL query to Contentful.</p>
  
  <p>Here's a live version: <a href="https://brave-jepsen-d8ae28.netlify.com/courses/my-first-course" rel="nofollow noreferrer">https://brave-jepsen-d8ae28.netlify.com/courses/my-first-course</a></p>
  
  <p>I created a handleChange function to set the state with the <code>event.target.id</code>, but it's returning errors once I click on a lesson paragraph tag. Any idea what's going on? I tested that the event Id was being captured with a <code>console.log(event.target.id)</code>, and it was, so I'm assuming it's something with rendering the component again once I attempt to set the state.</p>
  
  <p>Any help is appreciated! </p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link, graphql } from 'gatsby'
  import Layout from '../components/layout' 
  import Plyr from 'react-plyr'
  import '../components/plyr.css'
  
  // On click, set the value of that elements video url to video player url value
  
  class CourseTemplate extends Component {
      constructor(props) {
          super(props);
          this.state = {
              url: props.data.contentfulCourse.featureVideo
          };
          this.handleChange = this.handleChange.bind(this);
      };
  
      handleChange(event) {
          event.stopPropagation();
          // console.log(event.target.id)
          this.setState(prevState =&gt; ({
               url: event.target.id
          }));
        }
  
      render() {
          const courseContent = this.props.data.contentfulCourse
      return (
          &lt;Layout&gt;
              &lt;Plyr key={this.state.url} type="vimeo" videoId={this.state.url}/&gt;
              &lt;p&gt;{this.state.url}&lt;/p&gt;
              &lt;h1&gt;{courseContent.title}&lt;/h1&gt;
              &lt;p&gt;{courseContent.shortDescription}&lt;/p&gt;
              &lt;div&gt;
                  {courseContent.teachers.map(teacher =&gt; (
                      &lt;div key={teacher.id}&gt;
                          &lt;p&gt;by &lt;Link to={`/teachers/${teacher.id}`}&gt;{teacher.name}&lt;/Link&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
              &lt;div&gt;
                  {courseContent.lessons.map(lesson =&gt; (
                      &lt;div key={lesson.lessonVideo}&gt;
                          &lt;p onClick={this.handleChange} id={lesson.lessonVideo}&gt;{lesson.title}&lt;/p&gt;
                      &lt;/div&gt;
                  ))}
              &lt;/div&gt;
          &lt;/Layout&gt;   
      )
      }
  };
  
  export default CourseTemplate
  
  export const query = graphql`
    query CourseTemplate($id: String!) {
      contentfulCourse(id: {eq: $id}) {
        title
        shortDescription
        featureVideo
        slug
        teachers {
          id
          name
        }
        lessons {
          id
          title
          lessonVideo
          slug
        }
      } 
    }
  `
  </code></pre>
  
  <p>Errors I'm receiving:</p>
  
  <p><code>Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property 'target' on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().</code></p>
  
  <p><code>TypeError: Cannot read property 'id' of null at ProxyComponent.eval</code></p>