ReactJS:this.props.AddContact is not a function - typeerror

Question

I'm a beginner in react and working on an App that can manage Contact, and am having this error anytime i want to add a Contact to it. This is how it the Code looks like;
import React, { Component } from 'react';
import Navbar from './Navbar';
class AddContact extends React.Component {
state = {
firstName: '',
lastName: '',
email: '',
phone: '',
balance: ''
};
handleSubmit = (e) => {
e.preventDefault();
this.props.addContact(this.state);
};
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
};
render() {
return (
<>
<Navbar />
<div className="add">
<br></br>
<div className="card">
<div className="card-header">Add Client</div>
<div className="card-body">
<form onSubmit={this.handleSubmit}>
<label htmlFor="name">First Name:</label>
<input
name="firstName"
placeholder="firstName"
value={this.state.firstName}
onChange={this.handleChange} />
<br></br>
<label htmlFor="name">Last Name:</label>
<input
name="lastName"
placeholder="lastName"
value={this.state.lastName}
onChange={this.handleChange} />
<br></br>
<label htmlFor="email">Email:</label>
<input
name="email"
placeholder="email"
value={this.state.email}
onChange={this.handleChange} />
<br></br>
<label htmlFor="phone">Phone:</label>
<input
name="phone"
placeholder="phone"
value={this.state.phone}
onChange={this.handleChange} />
<br></br>
<label htmlFor="balance">Balance:</label>
<input
name="balance"
placeholder="balance"
value={this.state.balance}
onChange={this.handleChange} />
<br></br>
<button className="btn-btn"><strong>Add</strong></button>
</form>
</div>
</div>
</div>
</>
);
}
}
export default AddContact;

Answer 1

You need to add a list variable in your state as:
state = {
firstName: '',
lastName: '',
email: '',
phone: '',
balance: '',
list: [],
};
Now when you are updating your list, do this:
handleSubmit = (e) => {
e.preventDefault();
const { firstName, lastName, email, phone, balance, list } = this.state;
const contact = {
firstName: firstName,
lastName: lastName,
email: email,
phone: phone,
balance: balance,
}
const updateList = [...list, contact];
this.setState({
list: [...updateList]
})
};
You can also write shorthand as
handleSubmit = (e) => {
e.preventDefault();
const { firstName, lastName, email, phone, balance, list } = this.state;
const contact = {
firstName,
lastName,
email,
phone,
balance,
}
const updateList = [...list, contact];
this.setState({
list: [...updateList]
})
};