I don't understand why my scrollbar is only appearing when I hover over it, otherwise it doesn't show meaning if you didn't know it was there it could be very difficult to navigate. The code where I'm using the scrollbar is shown below.
import FormInputField from "./FormInputField";
import { useState } from "react";
import FormDropdown from "./FormDropdown";
const CoreDetailsForm = () => {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [dateOfBirth, setDateOfBirth] = useState('');
const [height, setHeight] = useState('');
const [weight, setWeight] = useState('');
const [gender, setGender] = useState('');
const [wingspan, setWingspan] = useState('');
return (
<div className="flex items-center p-2 flex-col h-4/5 w-3/6 rounded-xl bg-z12-gray opacity-70">
<div className="text-3xl font-bold mt-8 tracking-wide">My Details</div>
<div className="grid grid-cols-2 grid-rows-5 w-full mt-3 overflow-y-scroll scrollbar">
<FormInputField title="First Name" name="first-name" type="text" changeHandler={setFirstName} />
<FormInputField title="Surname" name="surname" type="text" changeHandler={setLastName} />
<FormInputField title="Date of Birth" name="dob" type="text" placeholder="DD/MM/YYYY" changeHandler={setDateOfBirth} />
<FormDropdown />
<FormInputField title="Height (cm)" name="height" type="number" min={0} max={999} changeHandler={setHeight} />
<FormInputField title="Weight (kg)" name="weight" type="number" min={0} max={999} changeHandler={setWeight} />
<FormInputField title="Wingspan (cm)" name="wingspan" type="number" min={0} max={999} changeHandler={setWingspan} />
<FormInputField title="Weight (kg)" name="weight" type="number" min={0} max={999} changeHandler={setWeight} />
<FormInputField title="Wingspan (cm)" name="wingspan" type="number" min={0} max={999} changeHandler={setWingspan} />
</div>
</div>
)
}
export default CoreDetailsForm;
I'm using React with TypeScript and Tailwind CSS. I've tried using overflow-auto as well.
try adding
.scrollbar { display: block; }
to your css file
Related
`I'm using Nextjs in my code but I faced this problem -
Firebase connection is working but the issue is with tag. It should follow this router.push("/dashboard") but it's not because of Form tag.
My coding is not working with the tag
import styles from "../styles/signup.module.css";
import { useState } from "react";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { app } from "../firebaseConfig";
import { useRouter } from "next/router";
import Link from "next/link";
export default function Signup() {
const auth = getAuth();
const router = useRouter();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const next = () => {
createUserWithEmailAndPassword(auth, email, password).then(() => {
router.push("/dashboard");
});
};
return (
<>
<div className={styles.bg}>
<div className={styles.text}>
<h1>
<strong>Signup</strong>
</h1>
</div>
<br />
<div className={styles.form}>
<form>
<label for="email">Email Address </label>
<input
type="email"
id="email"
name="email"
placeholder="Email Address"
onChange={(event) => setEmail(event.target.value)}
value={email}
/>
<br />
<br />
<label for="last">Password </label>
<input
type="password"
id="password"
name="password"
placeholder="Password"
onChange={(event) => setPassword(event.target.value)}
value={password}
/>
<br />
<br />
<button className={styles.button} onClick={next}>
Submit
</button>
</form>
</div>
</div>
</>
);
}
Again, My code that is working when not using tag.
It should follow this router.push("/dashboard") now it's working after removing the Form tag.
import styles from "../styles/signup.module.css";
import { useState } from "react";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { app } from "../firebaseConfig";
import { useRouter } from "next/router";
import Link from "next/link";
export default function Signup() {
const auth = getAuth();
const router = useRouter();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const next = () => {
createUserWithEmailAndPassword(auth, email, password).then(() => {
router.push("/dashboard");
});
};
return (
<>
<div className={styles.bg}>
<div className={styles.text}>
<h1>
<strong>Signup</strong>
</h1>
</div>
<br />
<div className={styles.form}>
<label for="email">Email Address </label>
<input
type="email"
id="email"
name="email"
placeholder="Email Address"
onChange={(event) => setEmail(event.target.value)}
value={email}
/>
<br />
<br />
<label for="last">Password </label>
<input
type="password"
id="password"
name="password"
placeholder="Password"
onChange={(event) => setPassword(event.target.value)}
value={password}
/>
<br />
<br />
<button className={styles.button} onClick={next}>
Submit
</button>
</div>
</div>
</>
);
}
So i have tab component with content on it, but it seems inside the tabpanel i take padding and margin a lot, i try to override it to decrease the margin and padding... but it doesn't work.. ,i have try some recomendation on stackoverflow but it seems dont help at alll here how its look:
here is my code:
import * as React from "react";
import Box from "#mui/material/Box";
import Tab from "#mui/material/Tab";
import TabContext from "#mui/lab/TabContext";
import TabList from "#mui/lab/TabList";
import TabPanel from "#mui/lab/TabPanel";
import { DataGrid, GridToolbar } from "#mui/x-data-grid";
import { useDemoData } from "#mui/x-data-grid-generator";
import { makeStyles } from "#mui/styles";
const VISIBLE_FIELDS = ["name", "rating", "country", "dateCreated", "isAdmin"];
const Calculation = () => {
const [value, setValue] = React.useState("1");
const handleChange = (event, newValue) => {
setValue(newValue);
};
const { data } = useDemoData({
dataSet: "Employee",
visibleFields: VISIBLE_FIELDS,
rowLength: 100,
});
const useStyles = makeStyles((theme) => ({
root: {
padding: "0px",
},
}));
return (
<div className="p-2">
<div className="p-2">
<form>
<label
for="search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
>
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg
aria-hidden="true"
className="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<input
type="search"
id="search"
class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-green-500"
placeholder="Search By SKU"
required
/>
<button
type="submit"
class="text-white absolute right-2.5 bottom-2.5 bg-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
>
Search
</button>
</div>
</form>
</div>{" "}
<div className="text-left pl-4 pb-4 font-bold text-3xl">
<h2>Detail SKU</h2>
</div>
<Box sx={{ width: "100%", typography: "body1" }}>
<TabContext value={value} index={0} classes={{ root: useStyles.tab }}>
<Box sx={{ borderColor: "divider", p: 0 }}>
<TabList
index={0}
classes={{ root: useStyles.tab }}
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
aria-label="scrollable auto tabs example"
>
<Tab label="BOM" value="1" />
<Tab label="Routing" value="2" />
<Tab label="Depre" value="3" />
<Tab label="OMC" value="4" />
</TabList>
</Box>
<TabPanel value="1">
<div className="m-0 p-0" style={{ height: 400, width: "100%" }}>
<DataGrid {...data} components={{ Toolbar: GridToolbar }} />
</div>
</TabPanel>
<TabPanel value="2">Routing</TabPanel>
<TabPanel value="3">Depre</TabPanel>
<TabPanel value="4">OMC</TabPanel>
</TabContext>
</Box>
</div>
);
};
export default Calculation;
Any help on this? will appreciate any try...
I think you should add style={{ padding: 0}} on the TabPanle component instead of the div.
hope any of you could help me out in here...
On the code below I have 2 separete elements which I want to show one at the time.
first element is an iframe
second is a Div
the ideia is if the user click on the {title} then the frame disaper and the div appear.
I can manage to make the frame disapper and appear by clicking on the title, but the same does not happen with the div.
the code is basically the same, so I don't really get why is the div not having the same behavior then the frame.
Also I double checked and both css classes get changed as expected, just that the css class seems not to work on the Div.
Tks in advance.
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;
className={`${content ? 'content_site' : 'content_frame'}`}
and
className={`${content ? 'content_frame' : 'content_site'}`}
are contrandicting each other because both are expecting content to be true change one to be !content
change the second one as you can see in your method setContent(!content)}
like this:
import React, { useState } from 'react';
const Card = (props) => {
const { id, title, active, site, img } = props.data;
const [content, setContent] = useState(false);
return (
<div className={`card ${active && 'active'}`} >
<img id='img_cover' src={img} alt='image01' onClick={() => props.onCardClick(id)}></img>
<div className='txt'>
<h2 onClick={() => setContent(!content)}>{title}</h2>
</div>
<iframe className={`${content ? 'content_site' : 'content_frame'}`} src={site} frameborder="0" title={title}>
</iframe>
<div className={`${!content ? 'content_frame' : 'content_site'}`}>
<form id="contact-form" action="#" className="table">
<input className='input_espace row' id='nome' placeholder="Name" name="name" type="text" required />
<input className='input_espace row' id='email' placeholder="Email" name="email" type="email" required />
<textarea id="text_area" className='row' cols="50" placeholder="Message" type="text" name="message" />
<button type="button" class="btn btn-outline-warning button_submit"> Enviar</button>
</form>
</div>
</div >
)
}
export default Card;
How can I pass the selected option from the React Select component to the input of that has an onChange function. Am I able to create a dedicated OnChange function for the Island input, If I do that I will have an issue with the current onChange function as they will clash, correct?
function onChange(e) {
setRental(() => ({ ...rental, [e.target.name]: e.target.value }));
}
<div>
<Select placeholder={" Select Island"} options={options} />
</div>
<div>
<input
onChange={onChange}
name="Island"
placeholder="Island"
value={rental.Island}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
This is the full code
import { API, Storage } from "aws-amplify";
import { useState, useRef } from "react";
import { v4 as uuid } from "uuid";
import { useRouter } from "next/router";
import { createRental } from "../graphql/mutations";
import Select from "react-select";
import Async, { useAsync } from "react-select/async";
const initialState = {
title: "",
description: "",
MaxNumberOfGuest: "",
MaxNumberOfAdults: "",
MaxNumberOfChildren: "",
NumberOfBedrooms: "",
NumberOfBaths: "",
PricePerNight: "",
AdditionalCosts: "",
StreetName: "",
Area: "",
ZipCode: "",
Island: "",
lat: "",
lon: "",
};
function CreateRental() {
const options = [
{ value: "Tenerife", label: "Tenerife" },
{ value: "Lanzarote", label: "Lanzarote" },
{ value: "Fuerteventura", label: "Fuerteventura" },
{ value: "Gran Canaria", label: "Gran Canaria" },
];
const [rental, setRental] = useState(initialState);
const [image, setImage] = useState(null);
const hiddenFileInput = useRef(null);
const {
title,
description,
MaxNumberOfGuest,
MaxNumberOfAdults,
MaxNumberOfChildren,
NumberOfBedrooms,
NumberOfBaths,
PricePerNight,
AdditionalCosts,
StreetName,
Area,
ZipCode,
Island,
lat,
lon,
} = rental;
const router = useRouter();
function onChange(e) {
setRental(() => ({ ...rental, [e.target.name]: e.target.value }));
}
function onChangeHandlerTwo(e) {
setRental(() => ({ Island, [e.target.name]: e.target.value }));
}
async function createNewRental() {
if (
!title ||
!description ||
!MaxNumberOfGuest ||
!MaxNumberOfAdults ||
!MaxNumberOfChildren ||
!NumberOfBedrooms ||
!NumberOfBaths ||
!PricePerNight ||
!AdditionalCosts ||
!StreetName ||
!Area ||
!ZipCode ||
!Island ||
!lat ||
!lon
)
return;
const id = uuid();
rental.id = id;
// If there is an image uploaded, store it in S3 and add it to the post metadata
if (image) {
const fileName = `${image.name}_${uuid()}`;
rental.FeaturedImage = fileName;
await Storage.put(fileName, image);
}
await API.graphql({
query: createRental,
variables: { input: rental },
authMode: "AMAZON_COGNITO_USER_POOLS",
});
router.push(`/rentals/${id}`);
}
async function uploadImage() {
hiddenFileInput.current.click();
}
function handleChange(e) {
const fileUploaded = e.target.files[0];
if (!fileUploaded) return;
setImage(fileUploaded);
}
return (
<>
<div>
<h1 className="text-3xl font-semibold tracking-wide mt-6">
Create new rental
</h1>
<input
onChange={onChange}
name="title"
placeholder="Title"
value={rental.title}
className="border-b pb-2 text-lg my-4 focus:outline-none w-full font-light text-gray-500 placeholder-gray-500 y-2"
/>
<textarea
onChange={onChange}
name="description"
placeholder="description"
value={rental.description}
className="border-b pb-2 text-lg my-4 focus:outline-none w-full font-light text-gray-500 placeholder-gray-500 y-2"
/>
<div className="grid grid-cols-4">
<div>
<input
onChange={onChange}
name="MaxNumberOfGuest"
placeholder="Maximum number of guests"
value={rental.MaxNumberOfGuest}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="MaxNumberOfAdults"
placeholder="Maximum number of adults"
value={rental.MaxNumberOfAdults}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="MaxNumberOfChildren"
placeholder="Maximum number of children"
value={rental.MaxNumberOfChildren}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="NumberOfBedrooms"
placeholder="Number of bedrooms"
value={rental.NumberOfBedrooms}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="NumberOfBaths"
placeholder="Number of baths"
value={rental.NumberOfBaths}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="PricePerNight"
placeholder="Price Per Night (£)"
value={rental.PricePerNight}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="AdditionalCosts"
placeholder="Additional Costs (£) "
value={rental.AdditionalCosts}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
</div>
<h2 className="text-3xl font-semibold tracking-wide mt-6">Address</h2>
<div className="grid grid-cols-4">
<div>
<input
onChange={onChange}
name="StreetName"
placeholder="Street Name"
value={rental.StreetName}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="Area"
placeholder="Area"
value={rental.Area}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="ZipCode"
placeholder="Zip Code"
value={rental.ZipCode}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<Select
placeholder={" Select Island"}
options={options}
changeHandler={onChangeHandlerTwo}
/>
</div>
<div>
<input
onChange={onChange}
name="Island"
placeholder="Island"
value={rental.Island}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="lat"
placeholder="Latitude"
value={rental.lat}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
<div>
<input
onChange={onChange}
name="lon"
placeholder="Longitude"
value={rental.lon}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
</div>
<div className="mt-6">
{image && <img src={URL.createObjectURL(image)} className="my-4" />}
<input
type="file"
ref={hiddenFileInput}
className="hidden"
onChange={handleChange}
/>
<button
className="bg-purple-600 text-white font-semibold px-8 py-2 rounded-lg mr-2"
onClick={uploadImage}
>
Upload Featured Image
</button>
<button
type="button"
className="mb-4 bg-blue-600 text-white font-semibold px-8 py-2 rounded-lg"
onClick={createNewRental}
>
Create Rental
</button>
</div>
</div>
</>
);
}
export default CreateRental;
As per my understanding, if you are wondering that you can create two onChange functions within the single component, it's not work as you expected, because you are creating two functions with different body but same name. You can give any name to handlers of the component. Only thing matter is where you are linking those handlers in your JSX.
function onChangeHandlerOne(e) {
setRental(() => ({ ...rental, [e.target.name]: e.target.value }));
}
function onChangeHandlerTwo(e) {
setRental(() => ({ ...rental, [e.target.name]: e.target.value }));
}
<div>
<Select placeholder={" Select Island"} options={options} changeHandler={onChangeHandlerTwo}/>
</div>
<div>
<input
onChange={onChangeHandlerOne}
name="Island"
placeholder="Island"
value={rental.Island}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 y-2"
/>
</div>
In Select component, you can call the handler that you have recieved
via props when user selects any option.
Below is the psuedo code. You can link the handler that you have recieved from the parent component over here.
# If you want to pass the event object to your handler make
'onChange={(event)=>props.changeHandler(event)}'
const Select = (props) => {
return(
<Form.Control
as="select"
# additional attributes
onChange={props.changeHandler}
>
<option value="burger">Burger</option>
<option value="pizza">Pizza</option>
</Form.Control>
)}
Let me know, if I understood incorrectly or if I missed anything.
Remove react select and use a default select type. This allows the onChange to work by the name field.
<select
name="Island"
value={rental.island}
onChange={onChange}
placeholder={"Select Island"}
className="border-b pb-2 text-lg my-4 focus:outline-none font-light text-gray-500 placeholder-gray-500 "
>
<option value="" disabled selected hidden>
Select Island
</option>
<option value="Tenerife">Tenerife</option>
<option value="Lanzarote">Lanzarote</option>
<option value="Fuerteventura">Fuerteventura</option>
<option value="Gran Canaria">Gran Canaria</option>
</select>
I have a Form and in that form I have all Fields like Input,Dropdown,Radio and Checkbox..
Now I am able to Post my data to the server using Redux, And I am able to post all the data except Checkbox values and Radio Button values....
What Changes I need to do for Checkbox and Radio button values..
This is the Action :
export const createData =(product) =>{
return async (dispatch)=>{
try {
let dataUrl ="http://localhost:3000/users";
let res = await axios.post(dataUrl,product);
dispatch({type :CREATE_DATA, payload:res.data});
} catch(error){
console.log(error)
}
}
}
This is the Reducer :
export const reducerName = (state = initialstate, action) => {
switch (action.type) {
case actiondata.GETALL_DATA:
return {
...state,
productdata : action.payload
}
case actiondata.CREATE_DATA :
return {
...state
}
default:return state
}
}
This is the ModelPopup :
const AddModel = () => {
const [model, setmodel] = useState(false)
const adduser = () => {
setmodel(true);
};
const closeModal = () => {
setmodel(false);
};
const [data, setdata] = useState({
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
"gender" : null,
"checking" :[]
})
let dispatch = useDispatch();
//Reading the Data from Store
let readdatafromstore = useSelector((state)=>{
return state.keepdatatostore;
})
const handleChnage=(e)=>{
setdata({...data,[e.target.name]:e.target.value});
}
const handleSubmit=(e)=>{
e.preventDefault();
dispatch(allActions.createData(data));
}
return (
<React.Fragment>
<div className="container">
<button type="button" className="btn btn-primary" onClick={adduser}>Add User</button>
</div>
{model && (
<div className="modal" style={{ display: "block" }}>
<div className="modal-dialog" style={{ maxWidth: "60%" }}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}></button>
</div>
<div className="modal-body">
<form>
<div className="row">
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">UserName</label>
<input type="text" className="form-control" placeholder='UserName' name="UserName" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">PhoneNumber</label>
<input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">Email</label>
<input type="email" className="form-control" placeholder='EmailAddress' id="exampleInputEmail1" aria-describedby="emailHelp" name="email" onChange={handleChnage} />
</div>
{/* <div className="mb-3">
<label
htmlFor="exampleInputPassword1"
className="form-label"
>
Date
</label>
<input
type="date"
className="form-control"
id="exampleInputPassword1"
/>
</div> */}
</div>
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="fw-bold">DropDown Value</label>
<select className="form-select" aria-label="Default select example" name="dropDown" onChange={handleChnage} >
<option selected>Select From Dropdown</option>
<option value="ReactJS">ReactJS</option>
<option value="JavaScript">JavaScript</option>
<option value="HtmlCss">HtmlCss</option>
</select>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Gender</label>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="male" onChange={handleChnage}/>
<label className="form-check-label" htmlFor="flexRadioDefault1" >Male</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="female" onChange={handleChnage}/>
<label className="form-check-label" htmlFor="flexRadioDefault2">Female</label>
</div>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Checkbox Value</label>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label className="form-check-label" htmlFor="flexCheckDefault">Javascript</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">React JS</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">HTML</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">CSS</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={closeModal}>Close</button>
<button type="button" className="btn btn-primary" onClick={handleSubmit}>Add User</button>
</div>
</div>
</div>
</div>
)}
</React.Fragment>
)
}
For Radio Button, Just add value attribute (value="male",value="female",value="others")