Estoy tratando de pasar el estado de una entrada de formulario al componente principal más cercano y luego volver a otro componente secundario en mi aplicación. El componente principal al que quiero elevar el estado era una función que tomaba 'flashcards' como un accesorio desestructurado que es crucial para la función de mi aplicación. Estoy tratando de elevar el estado a este componente y cuando investigué sobre cómo hacer esto, me di cuenta de que el componente principal al que está elevando el estado tiene que ser un "Componente de clase que extiende React. Component" y cuando haga eso, no puedo usar 'flashcards como un accesorio desestructurado porque aparece el error "Error de tipo no detectado: la clase extiende el valor indefinido no es un constructor o es nulo en Module../src/FlashcardList.js (FlashcardList.js:6:1) en Module.options.factory (reaccionar actualización: 6: 1)" ¿Cómo cambio el componente FLashcardList para que pueda aceptar el accesorio de tarjetas flash y vincularlo en el constructor? Así es como se ve mi archivo FlashcardList.js ahora después de haberlo cambiado a la forma de extensión de clase:

 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 wa unique id })} </div> </div> ) } }

y así es como se veía antes de cambiarlo:

 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 wa unique id })} </div> ) }