Join Our Groups
import React, { useState, useEffect } from ‘react’;
import firebase from ‘./firebase’;
import ‘./FormComponent.css’;
const FormComponent = () => {
const [formData, setFormData] = useState([]);
const [name, setName] = useState(“”);
const [lastname, setLastname] = useState(“”);
const [email, setEmail] = useState(“”);
const [tel, setTel] = useState(“”);
const [message, setMessage] = useState(“”);
const [checkbox1, setCheckbox1] = useState(false);
const [checkbox2, setCheckbox2] = useState(false);
useEffect(() => {
const fetchData = async () => {
const dbRef = firebase.database().ref(“FormData”);
dbRef.on(‘value’, (snapshot) => {
const data = snapshot.val();
if (data) {
const formDataArray = Object.entries(data).map(([key, value]) => ({
id: key,
…value
}));
setFormData(formDataArray);
} else {
setFormData([]);
}
});
};
fetchData();
return () => {
firebase.database().ref(“FormData”).off();
};
}, []);
const handleSubmit = (e) => {
e.preventDefault();
firebase.database().ref(“FormData”).push({
name,
lastname,
email,
tel,
message,
checkbox1,
checkbox2
});
setName(“”);
setLastname(“”);
setEmail(“”);
setTel(“”);
setMessage(”);
setCheckbox1(false);
setCheckbox2(false);
};
return (
<>
<div className=”container py-5″>
<div className=”row justify-content-center”>
<div className=”col-md-8″>
<h1 className=”text-center mb-4″>Contact Us</h1>
<div className=”card”>
<div className=”card-body”>
<form onSubmit={handleSubmit}>
<div className=”mb-3″>
<input type=”text” placeholder=’Name’ className=”form-control” value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className=”mb-3″>
<input type=’text’ placeholder=’Last Name’ className=”form-control” value={lastname} onChange={(e) => setLastname(e.target.value)} />
</div>
<div className=”mb-3″>
<input type=’email’ placeholder=’Email’ className=”form-control” value={email} onChange={(e) => setEmail(e.target.value)} />
</div>
<div className=”mb-3″>
<input type=’tel’ placeholder=’Nubmer’ className=”form-control” value={tel} onChange={(e) => setTel(e.target.value)} />
</div>
<div className=”mb-3″>
<textarea placeholder=’Message’ className=”form-control” value={message} onChange={(e) => setMessage(e.target.value)} ></textarea>
</div>
<div className=”form-check”>
<input className=”form-check-input” type=”checkbox” checked={checkbox1} onChange={(e) => setCheckbox1(e.target.checked)} id=”checkbox1″ />
<label className=”form-check-label” htmlFor=”checkbox1″>
Checkbox 1
</label>
</div>
<div className=”form-check”>
<input className=”form-check-input” type=”checkbox” checked={checkbox2} onChange={(e) => setCheckbox2(e.target.checked)} id=”checkbox2″ />
<label className=”form-check-label” htmlFor=”checkbox2″>
Checkbox 2
</label>
</div>
<button className=”btn btn-primary” type=’submit’>Submit</button>
</form>
</div>
</div>
<div className=”mt-5″>
<h2>Form Data</h2>
<table className=”table”>
<thead>
<tr>
<th>Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Number</th>
<th>Message</th>
<th>Checkbox 1</th>
<th>Checkbox 2</th>
</tr>
</thead>
<tbody>
{formData.map((data) => (
<tr key={data.id}>
<td>{data.name}</td>
<td>{data.lastname}</td>
<td>{data.email}</td>
<td>{data.tel}</td>
<td>{data.message}</td>
<td>{data.checkbox1 ? “Checked” : “Unchecked”}</td>
<td>{data.checkbox2 ? “Checked” : “Unchecked”}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</>
);
};
export default FormComponent;
import firebase from “firebase/compat/app”;
import “firebase/compat/database”;
const firebaseConfig = {
apiKey: “AIzaSyA4WD6poqogBsiZrZYFWS9469W7FFhGNTg”,
authDomain: “iit-bhilai-396fa.firebaseapp.com”,
projectId: “iit-bhilai-396fa”,
databaseURL:”https://iit-bhilai-396fa-default-rtdb.firebaseio.com/”,
storageBucket: “iit-bhilai-396fa.appspot.com”,
messagingSenderId: “52947618163”,
appId: “1:52947618163:web:90a9eec48642322e13dd06”
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase;