title: How to solve Uncaught TypeError: Class extends value undefined is not a constructor or null?
body: <p>I am trying to pass state from a form input to the nearest parent component and then back down to another child component in my app. The parent component that I want to lift the state to was a function taking in 'flashcards' as a destructured prop which is crucial to the function of my app. I am trying to lift the state to this component and when doing research on how to do this I've noticed that the parent component that your lifting the state to has to be a &quot;Class 'component' extends React.Component&quot; and when I do that I cant use 'flashcards as a destructured prop because i get the error &quot;Uncaught TypeError: Class extends value undefined is not a constructor or null
  at Module../src/FlashcardList.js (FlashcardList.js:6:1)
  at Module.options.factory (react refresh:6:1)&quot;
  How do I change the FLashcardList component so that it can take in the flashcards prop as well as binding in the constructor.
  Here is what my FlashcardList.js file looks like now after I've changed it to the class extends form:</p>
  <pre><code>import React from 'react'
  import Flashcard from './Flashcard'
  import NameForm from './NameForm'
  import flashcards from './App'
  
  export default class FLashcardList extends React.Component ({ flashcards }) {
    // taking in the flashcards as destructured props so we dont have to make a props. variable
    constructor(props) {
      super(props);
      this.state = {username: ''};
      this.handleChange = this.handleChange.bind(this);
    }
    handleChange = (event) =&gt; {
      this.setState({username: event.target.value});
  
    }
  
    render() {
  
        return (
          &lt;div&gt;
          &lt;NameForm onChoose={this.handleChange} /&gt;
  
          
          &lt;div className='card-grid'&gt; 
  
            {flashcards.map(flashcard =&gt; { // loops through the flashcards api and maps each one to flashcard
  
    return &lt;Flashcard flashcard={flashcard} key={flashcard.id} choice={this.state.username} /&gt; // each flashcard is then passed down to the &quot;Flashcard.js&quot; component we created returned w a unique id
    })}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  
  }
  </code></pre>
  <p>and here is what it looked like before I changed it:</p>
  <pre><code>import React from 'react'
  import Flashcard from './Flashcard'
  
  export default function FLashcardList({ flashcards }) {
    // taking in the flashcards as destructured props so we dont have to make a props. variable
    return (
  
      // card-grid is a container so we can put all the cards in a grid to ensure they change in size proportionally to the size of the window //
      &lt;div className='card-grid'&gt; 
  
        {flashcards.map(flashcard =&gt; { // loops through the flashcards api and maps each one to flashcard
  
            return &lt;Flashcard flashcard={flashcard} key={flashcard.id} /&gt; // each flashcard is then passed down to the &quot;Flashcard.js&quot; component we created returned w a unique id
        })}
      &lt;/div&gt;
    )
  }
  </code></pre>