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 "Class 'component' extends React.Component" and when I do that I cant use 'flashcards as a destructured prop because i get the error "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)" 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:

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) => {
    this.setState({username: event.target.value});

  }

  render() {

      return (
        <div>
        <NameForm onChoose={this.handleChange} />

        
        <div className='card-grid'> 

          {flashcards.map(flashcard => { // loops through the flashcards api and maps each one to flashcard

  return <Flashcard flashcard={flashcard} key={flashcard.id} choice={this.state.username} /> // each flashcard is then passed down to the "Flashcard.js" component we created returned w a unique id
  })}
        </div>
      </div>
    )
  }

}

and here is what it looked like before I changed it:

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 //
    <div className='card-grid'> 

      {flashcards.map(flashcard => { // loops through the flashcards api and maps each one to flashcard

          return <Flashcard flashcard={flashcard} key={flashcard.id} /> // each flashcard is then passed down to the "Flashcard.js" component we created returned w a unique id
      })}
    </div>
  )
}