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