Así que estoy siguiendo un curso sobre React y no puedo encontrar la manera de resolver esto. Me sugiere que ponga el operador Spread '...' en lugar de 'esto'. para seleccionar elementos de la matriz. Pero cuando hago eso, todavía muestra el error 'estado' no está definido no-undef'. Soy nuevo en React, ¿estoy haciendo algo mal aquí?
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import { render } from '@testing-library/react'; import React from 'react'; import { Component } from 'react/cjs/react.production.min'; import './App.css'; import Person from './Person/Person'; class App extends Component { state = { persons: [{name: 'Max', age: 22}, {name: 'Manu', age: 19}, {name: 'Stephanie', age: 41}, {name: 'George', age: 40} ] } render() { return ( <div className="App"> <h1>Hi, I am a React App</h1> <p>This is really working!</p> <button>Switch Name</button> <Person name= {this.state.persons[0].name} {this.state.persons[0].age}/> <Person {this.persons[1].name} {this.state.persons[1].age}/> <Person {this.state.persons[2].name} {this.state.persons[2].age}> My Hobbie is swimming.</Person> <Person {this.state.persons[3].name} {this.state.persons[3].age}/> </div> ); } } export default App;Suponiendo que el componente <Person /> acepta las propiedades de age y name , puede distribuir todo el objeto con propiedades coincidentes con este componente utilizando la sintaxis de distribución de la siguiente manera:
<Person {...{this.persons[0]}} />
Lo anterior es equivalente pero abreviado para
<Person name={this.persons[0].name} age={this.persons[0].age} />
Tenga en cuenta también una sintaxis incorrecta que estaba insertando:
<Person name= {this.state.persons[0].name} {this.state.persons[0].age}/>
En primer lugar, el espacio no debería estar allí, ya que necesita pasar un valor a una propiedad determinada, a diferencia de la sintaxis JS de Vanilla, donde puede crear una variable con o sin espacios:
const x = 1; o const x=1;
En segundo lugar, está tratando de pasar el valor de age al componente pero no ha señalado a qué propiedad debe asignarse.
Sigue así y buena suerte.