i have a problem to place the modal code of daisy UI in my React combined with Laravel project. please see this code
{/* The button to open modal */}
<label htmlFor="my-modal" className="btn">open modal</label>
{/* Put this part before </body> tag */}
<input type="checkbox" id="my-modal" className="modal-toggle" />
<div className="modal">
<div className="modal-box">
<h3 className="font-bold text-lg">Congratulations random Internet user!</h3>
<p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div className="modal-action">
<label htmlFor="my-modal" className="btn">Yay!</label>
</div>
</div>
</div>
what im trying to do i want to put my filter input on modal, in code above there is a comment {/* Put this part before </body> tag */} so i dont understand where to put this code.
in my app there is no <body> tag, its look like code bellow.
import React, { useEffect , useState } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import InputLabel from '@/Components/InputLabel';
import Flash from '@/Components/Flash';
import Paginator from '@/Components/Paginator';
import NumberInput from '@/Components/NumberInput';
import DateInput from '@/Components/DateInput';
import TextInput from '@/Components/TextInput';
import SelectBoxId from '@/Components/SelectBoxId';
import PrimaryButton from '@/Components/PrimaryButton';
import { Link } from '@inertiajs/inertia-react';
import { Inertia } from '@inertiajs/inertia';
import { useForm } from '@inertiajs/inertia-react';
export default function Merchandise (props){
const { data, setData, get, processing, errors, reset } = useForm({
name: '',
merchandise_category_id: '',
price: '',
from: '',
to: '',
stock: ''
});
const onHandleChange = (event) => {
setData(event.target.name, event.target.type === 'checkbox' ?
event.target.checked : event.target.value);
};
const submit = (e) => {
e.preventDefault();
get(route('merchandise.list'));
};
return (
<AuthenticatedLayout auth={props.auth} errors={props.errors}>
<div className="w-full lg:max-w-7xl mt-1 px-4 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
{ props.flash.message !== null ? <Flash message = {props.flash.message}/> : <div></div>}
<div>
<form onSubmit={submit}>
<InputLabel forInput="Name" value="Name" />
<TextInput
type="text"
name="name"
value={data.name}
className="m-2 input input-bordered w-full"
handleChange={onHandleChange}
/>
<InputLabel forInput="Price" value="Price" />
<NumberInput
type="number"
name="price"
value={data.price}
className="m-2 input input-bordered w-full"
handleChange={onHandleChange}
/>
<InputLabel forInput="stock" value="Stock" />
<NumberInput
type="number"
name="stock"
value={data.stock}
className="m-2 input input-bordered w-full"
handleChange={onHandleChange}
/>
<InputLabel forInput="From" value="From" />
<DateInput
type="date"
name="from"
value={data.from}
className="m-2 input input-bordered w-full"
handleChange={onHandleChange}
/>
<InputLabel forInput="To" value="To" />
<DateInput
type="date"
name="to"
value={data.to}
className="m-2 input input-bordered w-full"
handleChange={onHandleChange}
/>
<InputLabel forInput="Category" value="Category"/>
<SelectBoxId className
name="merchandise_category_id"
value={data.merchandise_category_id}
data={props.merchandiseMaster}
handleChange={onHandleChange}
/>
<InputLabel forInput="User" value="User"/>
<SelectBoxId className
name="user_id"
value={data.user_id}
data={props.user}
handleChange={onHandleChange}
/>
<PrimaryButton className="" >
FILTER
</PrimaryButton>
</form>
</div>
</div>
</AuthenticatedLayout>
)
}
Please help me to figure it out thankyou in advance
