Save data to firebase - reactjs

Question

enter image description here
I am building this meeting booking app where the available meetings to books shows as buttons and after klicking the meeting you want so select. I want to make it possible to save that information in the button with a name and email that is written in the form.
I am having it hard to set the code so that my button selection is saved and saved to firebase along with the name and email after submit button is pressed. Right know I get the error that 'set' in handleSubmit is not set.
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}
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}
onChange={this.handleChange}
ref="name1"
/>
</label>
<label>
E-mail:
<input
type="text"
email={this.state.email}
onChange={this.inputData}
onChange={this.handleChange}
ref="email1"
/>
</label>
<input className="confirm" type="submit" value="Bekräfta" />
</form>
<div className="viewSelect" />
</>
);
}
}
}
export default App;

Answer 1

TL;DR;
You have a typo in your code, it should be:
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));
Explanation:
Since you add the ;, you end the first expression and start a new one that is:
set({
meeting: this.state.meeting,
name: this.state.name,
email: this.state.email
}).catch(error => console.log(error));
Since there is no function defined, Javascript gives this error. But what you want do do is call the method set of the object firebase.database().ref('Newdata/${this.state.uid}'), therefore you should do:
firebase.database().ref('Newdata/${this.state.uid}').set({ /* ... */ })