Vfrdtyky

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 this.state with data pulling from a GraphQL query to Contentful.

Here's a live version: https://brave-jepsen-d8ae28.netlify.com/courses/my-first-course

I created a handleChange function to set the state with the event.target.id, 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 console.log(event.target.id), and it was, so I'm assuming it's something with rendering the component again once I attempt to set the state.

Any help is appreciated!

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 => ({

             url: event.target.id

        }));

      }



    render() {

        const courseContent = this.props.data.contentfulCourse

    return (

        <Layout>

            <Plyr key={this.state.url} type="vimeo" videoId={this.state.url}/>

            <p>{this.state.url}</p>

            <h1>{courseContent.title}</h1>

            <p>{courseContent.shortDescription}</p>

            <div>

                {courseContent.teachers.map(teacher => (

                    <div key={teacher.id}>

                        <p>by <Link to={`/teachers/${teacher.id}`}>{teacher.name}</Link></p>

                    </div>

                ))}

            </div>

            <div>

                {courseContent.lessons.map(lesson => (

                    <div key={lesson.lessonVideo}>

                        <p onClick={this.handleChange} id={lesson.lessonVideo}>{lesson.title}</p>

                    </div>

                ))}

            </div>

        </Layout>   

    )

    }

};



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

      }

    } 

  }

`

Errors I'm receiving:

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().

TypeError: Cannot read property 'id' of null at ProxyComponent.eval

You don't need to use event at all for this. You also don't need to pass a function to setState since you're not doing anything with prevState.

import React, { Component } from "react"

import { Link, graphql } from "gatsby"

import Layout from "../components/layout"

import Plyr from "react-plyr"

import "../components/plyr.css"



class CourseTemplate extends Component {

  constructor(props) {

    super(props)

    this.state = {

      url: props.data.course.featureVideo,

    }

    this.setVideoUrl = this.setVideoUrl.bind(this)

  }



  setVideoUrl(url) {

    this.setState({ url })

  }



  render() {

    const courseContent = this.props.data.course



    return (

      <Layout>

        <Plyr type="vimeo" videoId={this.state.url} />



        <div>

          {courseContent.lessons.map(lesson => (

            <div key={lesson.id}>

              <p onClick={() => this.setVideoUrl(lesson.videoUrl)}>

                {lesson.title}

              </p>

            </div>

          ))}

        </div>

      </Layout>

    )

  }

}



export default CourseTemplate



export const query = graphql`

  query CourseTemplate($id: String!) {

    course: contentfulCourse(id: { eq: $id }) {

      title

      shortDescription

      featureVideo

      slug

      teachers {

        id

        name

      }

      lessons {

        id

        title

        videoUrl: lessonVideo

        slug

      }

    }

  }

`