Category: react
simple booking app in react
Published on 22 Apr 2026
Explanation
Create a basic React component to manage
booking form inputs such as name and
date using useState.
Code:
import React, { useState } from 'react';
function BookingApp() {
const [name, setName] = useState('');
const [date, setDate] = useState('');
Explanation
Create a function to handle booking
submission
and store booking details.
Code:
const [bookings, setBookings] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
const newBooking = { name, date };
setBookings([...bookings, newBooking]);
setName('');
setDate('');
};
Explanation
Build a form UI for entering booking
details.
return (
<div>
<h2>Simple Booking App</h2>
<form onSubmit={handleSubmit}>
{{code_below}}
</form>
)
Code:
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter Name"
value={name}
onChange={(e) =>
setName(e.target.value)}
/>
<input
type="date"
value={date}
onChange={(e) =>
setDate(e.target.value)}
/>
</form>
Explanation
Display the list of bookings dynamically
using map().
Code:
<ul>
{bookings.map((booking, index) => (
<li key={index}>
{booking.name} booked for
{booking.date}
</li>
))}
</ul>
</div>
);
}
export default BookingApp;
Explanation
This simple project demonstrates
core React concepts
such as useState, event handling,
form submission, and list rendering.
Code:
// Concepts covered: // useState // Forms // Event handling // Rendering lists with map()