Cant text in input field - reactjs

Question

I am building a meeting booking webb application. I want to save the content in the buttons to firebase and also the input text in the form to firebase.
I cant type text in the input field for then I get error: TypeError: Cannot read property 'refs' of undefined
enter image description here
enter image description here
import React, { Component } from "react";
import "./App.css";
import firebase from "firebase";
const uuid = require("uuid");
class App extends Component {
constructor(props) {
super(props);
this.state = {
uid: uuid.v1(),
meeting: "",
name: "",
email: ""
};
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
console.log(firebase);
var database = firebase.database();
var ref = database.ref("meeting");
var data = {
id: "",
user: ""
};
ref.push(data);
// this.state = {
// items: [],
// isLoaded: true,
// }
// this.state = {
// name: '',
// email: '',
// };
}
handleClick = e => {
console.log(e.target.innerHTML);
alert("Du har valt ett möte");
};
componentDidMount() {
fetch("http://www.mocky.io/v2/5c9cdca03300004d003f2151")
.then(res => res.json())
.then(json => {
let meetings = [];
json.forEach(meeting => {
if (
new Date(meeting.startDate).getDay() !==
new Date(meeting.endDate).getDay()
) {
let day1 = {
activity: meeting.activity,
location: meeting.location,
startDate: meeting.startDate
};
let day2 = {
activity: meeting.activity,
location: meeting.location,
endDate: meeting.endDate
};
meetings.push(day1, day2);
} else {
meetings.push(meeting);
}
});
console.log(meetings);
this.setState({
isLoaded: true,
items: meetings
});
});
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.on("value", snap => console.log("from db", snap.val()));
}
handleChange(e) {
this.setState({
name: e.target.name
});
}
handleSubmit(e) {
alert("Er bokning är bekräftad: " + this.state.value);
console.log("Du har bekräftat er bokning");
e.preventDefault();
firebase
.database()
.ref(`Newdata/${this.state.uid}`)
.set({
meeting: this.state.meeting,
name: this.state.name,
email: this.state.email
})
.catch(error => console.log(error));
}
inputData(e) {
const meeting = this.refs.meeting1.value;
const name = this.refs.name1.value;
const email = this.refs.email1.value;
this.setState({ meeting, name, email });
}
render() {
var { isLoaded, items } = this.state;
if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<>
<div className="App">
<div className="AppHeader">
<h1>Boka ditt möte nedan</h1>
</div>
<ul>
{items.map((item, i) => (
<li key={i}>
<button
onClick={e => this.handleClick(e)}
onChange={this.inputData}
ref="meeting1"
className="select"
>
{item.activity}
<br />
Starttid: {item.startDate}
<br />
Sluttid: {item.endDate}
<br />
Plats: {item.location}
<br />
</button>
</li>
))}
</ul>
</div>
<div className="selectedMeeting">
Fyll i dina uppgifter och bekräfta
</div>
<form onSubmit={this.handleSubmit} className="bookingSection">
<label>
Name:
<input
type="text"
name={this.state.name}
onChange={this.inputData}
ref="name1"
/>
</label>
<label>
E-mail:
<input
type="text"
email={this.state.email}
onChange={this.inputData}
ref="email1"
/>
</label>
<input className="confirm" type="submit" value="Bekräfta" />
</form>
<div className="viewSelect" />
</>
);
}
}
}
export default App;

Answer 1

Make sure your "def" variable is defined before attempting to push it, like so:
var data = { id: "",user: "" };
var ref = [];
ref.push(...);

Answer 2

Either add to your constructor:
this.inputData = this.inputData.bind(this);
or use arrow syntax to preserve the lexical this:
inputData = (e) => {