Not able to add email field in react web app - reactjs

Question

I am developing a small React App that is integrating with Mobx. I have setup a members store which is the following:
import {observable, action, computed} from 'mobx';
class MemberStore {
#observable members = [];
#action addMember(data) {
const existing = this.members;
this.members = existing.concat(data);
}
#computed get memberCount() {
return this.members.length;
}
}
const store = new MemberStore();
export default store;
Now I have a contact page which has a form of Name and email. Now I am able to add a name but not the email. So basically when I click the submit button I only get the name and a 0 next to the name.
import React, { Component } from 'react';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import Jumbotron from '../components/Jumbotron';
import {inject, observer} from 'mobx-react';
#inject('MemberStore')
#observer
class Contact extends Component {
handleSubmit = (e) => {
e.preventDefault();
const member = this.member.value;
const email = this.email.value;
// const email = this.email.value;
this.props.MemberStore.addMember(member, email);
this.member.value = '';
this.email.value = '';
}
render() {
const {MemberStore} = this.props;
return (
<div>
<Navbar />
<Jumbotron title="Contact Page" subtitle="You want to get in touch"/>
<div className="container">
<h2>You have {MemberStore.memberCount} members.</h2>
<form onSubmit={e => this.handleSubmit(e)}>
<input type="text" placeholder="Enter Your Name" ref={input => this.member = input }/>
<div>
<input type="text" placeholder= "Enter Your Email" ref={input => this.email = input }/>
</div>
<button>Submit</button>
</form>
<ul>
{MemberStore.members.map((member,email) => (
<li key={member}>
{member}
{email}
</li>
))}
</ul>
</div>
<Footer />
</div>
)
}
}
export default Contact;
Any help would be appreciated.

Answer 1

Your problem is probably that addMember takes one parameter data, and you’re passing two parameters to it when you call it: addMember(name, email).
You should pass the name and email in as an object instead:
addMember({name, email})
Your code that maps the MemberStore.members array to JSX is also taking two parameters, when it should only take one object as a param:
{MemberStore.members.map({member,email}) => (
Note that I’m using the ES6 Object Literal Property Value Shorthand syntax above.