state' is not defined no-undef

Question

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;

Answer 1

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.