state' is not defined no-undef-CodePudding

So I’m following a course on React and I can't figure out how to solve this. It suggests me that I put Spread operator '...' instead of 'this.' to select elements from the array. But when I do that it still shows error 'state' is not defined no-undef'. Im new to React, so am I doing something wrong here?

<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;

CodePudding user response：

Assuming <Person /> component accepts age and name properties you can spread entire object with matching properties to this component using spread syntax as following:

<Person {...{this.persons[0]}} />

The above is equivalent yet shorthand for

<Person name={this.persons[0].name} age={this.persons[0].age} />

Please also note a wrong syntax you were inserting:

<Person name= {this.state.persons[0].name} {this.state.persons[0].age}/>

First, the space shouldn't be there as you need to pass a value to a given property unlike to the vanilla JS syntax where you can create a variable with or woithout spaces:

const x = 1; or const x=1;

Secondly, you are trying to pass age value to component but you haven't pointed out which property it should be assigned to.

Keep up and good luck.