I can't loop this array without getting an error (React) - arrays

Question

I am learning React and I have just learned to get input values. I tried to write a code to practice. I had an error I can't solve. I tried everything:
I tried to put the array map in another function
I tried to use a return (but React isn't pure js so it didn't work)
I tried to move the map outside the functions but I need to map the Array each time I press the Add button
I tried to override the persons variables with the array map
Can someone help me? Thanks in advance.
P.S. Sorry for my terrible english
here it is:
import './App.css';
import React from 'react'
class App extends React.Component {
state = {
name: '',
surname: '',
age: '',
};
persons = []
getName = (e) => {
this.setState({name: e.target.value})
}
getSurname = (e) => {
this.setState({surname: e.target.value})
}
getAge = (e) => {
this.setState({age: e.target.value})
}
handleSubmit = (e) => {
e.preventDefault()
const name = this.state.name
const surname = this.state.surname
const age = this.state.age
this.persons.push(name + ' ' + surname + ', ' + age)
const persons_list = this.persons.map((person) =>
<li>{person}</li>
);
}
render () {
return (
<div className='container'>
<h1 className='title'>React Database</h1>
<form action="">
<input type="text" placeholder='Name' className='name' onChange={this.getName} />
<input type="text" placeholder="Surname" className='surname' onChange={this.getSurname} />
<input type="text" placeholder="Age" className='age' onChange={this.getAge} />
<button className='add_btn' onClick={this.handleSubmit}>Add</button>
<button className='delete_btn' onClick={this.persons.pop()}>Delete</button>
</form>
<ul>{this.persons_list}</ul> // the error is here: I can't use a variable inside a function
</div>
);
}
}
export default App

Answer 1

Move persons_list inside the render function. You have the list as part of the handleSubmit function.
handleSubmit = (e) => {
e.preventDefault()
const name = this.state.name
const surname = this.state.surname
const age = this.state.age
this.persons.push(name + ' ' + surname + ', ' + age)
const persons_list = this.persons.map((person) =>
<li>{person}</li>
);
}
//try something like this
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
state = {
name: "",
surname: "",
age: "",
porsons: [],
};
persons = [];
getName = (e) => {
this.setState({ name: e.target.value });
};
getSurname = (e) => {
this.setState({ surname: e.target.value });
};
getAge = (e) => {
this.setState({ age: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
const name = this.state.name;
const surname = this.state.surname;
const age = this.state.age;
this.persons.push(name + " " + surname + ", " + age);
this.setState({ persons: this.persons });
};
render() {
console.log("App started");
return (
<div className="container">
<h1 className="title">React Database</h1>
<form action="">
<input
type="text"
placeholder="Name"
className="name"
onChange={this.getName}
/>
<input
type="text"
placeholder="Surname"
className="surname"
onChange={this.getSurname}
/>
<input
type="text"
placeholder="Age"
className="age"
onChange={this.getAge}
/>
<button className="add_btn" onClick={this.handleSubmit}>
Add
</button>
<button className="delete_btn" onClick={this.persons.pop()}>
Delete
</button>
</form>
<ul>
{(this.state.persons || []).map((person) => (
<li>{person}</li>
))}
</ul>
</div>
);
}
}
render(<App />, document.querySelector("#app"));

Answer 2

You should learn about scope. The persons_list variable you are using in handleSubmit is only visible to handleSubmit, you should move it outside the function, or instead do the following
render () {
return (
<div className='container'>
<h1 className='title'>React Database</h1>
<form action="">
<input type="text" placeholder='Name' className='name' onChange={this.getName} />
<input type="text" placeholder="Surname" className='surname' onChange={this.getSurname} />
<input type="text" placeholder="Age" className='age' onChange={this.getAge} />
<button className='add_btn' onClick={this.handleSubmit}>Add</button>
<button className='delete_btn' onClick={this.persons.pop()}>Delete</button>
</form>
<ul>{this.persons.map((person) => <li>{person}</li>)}</ul> // the error is here: I can't use a variable inside a function
</div>
);
}