trying to prevent default on form submission though it goes ahead and submits user input--
if I have the form onsubmit value to empty then the form prevents default.. is there solution to this?
Below is my form; on submit is empty as it prevents default when empty. though it should be going to generate as shown below...
<form className='grid' onSubmit={}>
<div className='flex'>
{/* <InputField
isRequired={true}
id='productNameField'
required={true}
className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
type='text'
placeholder='Spotify'
label='Product Name'
onChange={onSetProductName}
/> */}
<div className=' relative '>
<label className='text-gray-700'>
Product Name
<span className='text-red-500 required-dot'>*</span>
</label>
<input
type='text'
required
className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-400 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-accent1 focus:border-transparent'
placeholder='Spotify'
onChange={onSetProductName}
/>
</div>
</div>
{/* <div className='flex pt-6'>
<InputField
id='productDescriptionField'
required={true}
className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg resize-none h-full p-1'
type='text'
placeholder='Spotify is a music service that lets you listen to music and share it with friends.'
label='Product Description'
maxRows={5}
onChange={onSetProductDescription}
multiline
/>
</div>
<div className='flex pt-6'>
<InputField
id='platformField'
required={true}
className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
type='text'
placeholder='Instagram'
label='Platform'
onChange={onSetPlatform}
/>
</div>
<div className='flex pt-6'>
<InputField
id='audienceField'
required={true}
className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
type='text'
placeholder='Teens'
label='Audience'
onChange={onSetAudience}
/>
</div> */}
<div className='grid'>
<div className='grid grid-cols-2 pt-6'>
{pendingCreativeAd === true ? (
<div className='grid justify-start'>
<button
type='button'
disabled={true}
className='py-2 px-4 flex justify-center items-center bg-gray-600 text-white w-full transition ease-in duration-200 text-center text-base font-semibold rounded-lg '
>
1 sec.
<LoadingIcon height={21} width={21} />
</button>
</div>
) : (
<div className='grid justify-start'>
<button
type='submit'
// onClick={generate}
className='py-2 px-4 flex justify-center items-center bg-accent1 hover:bg-blue-800 focus:bg-accent1 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-lg '
>
Generate
</button>
</div>
)}
<div className='grid justify-end'>
<button
type='button'
onClick={clearForm}
className='py-2 px-4 flex justify-center items-center bg-orange-700 hover:bg-orange-800 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:bg-orange-700 rounded-lg '
>
Clear Form
</button>
</div>
</div>
</div>
</form>
const generate = async (e) => {
e.preventDefault();
startGenAd(productName, productDescription, platform, audience);
console.log('submitting generate');
};
Just use your generate function in Form's Submit Event Instead of Button's Click Event. I think this is the easiest Approach.
set type e to
const generate = async (e: { preventDefault: () => void; }) => {
e.preventDefault();
startGenAd(productName, productDescription, platform, audience);
console.log('submitting generate');
};
Related
So i try to open modal using props from react js..., i try to console log, i found that the props is passed but the modal component is not open.. here is my try:
const [open, setOpen] = useState(false);
const openModal = () => {
setOpen(!open);
};
const handleLogin = (e) => {
e.preventDefault();
openModal();
};
<div>
{/* container */}
<div className="bg-gradient-to-r from-yellow-500 block h-screen items-center justify-center p-4 pt-32 md:flex">
{<WarnModal props={open} />}
{/* login.card */}
<div className=" bg-no-repeat bg-left bg-image flex flex-col items-center max-w-screen-lg overflow-hidden rounded-lg shadow-lg text-white w-full md:flex-row">
{/* logo */}
<div className="backdrop-blur-sm backdrop-filter flex flex-col items-center justify-center p-4 text-dark w-full md:w-1/2"> </div></div>
here is whats looks like on the modal component:
const WarnModal = ({ props }) => {
console.log("props", props);
const [open, setOpen] = useState(false);
const showModal = () => {
setOpen(props);
};
const cancelButtonRef = useRef(null);
return (
<Transition appear={true} show={open} as={Fragment}>
<Dialog
as="div"
className="relative z-10"
initialFocus={cancelButtonRef}
onClose={setOpen}
>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon
className="h-6 w-6 text-red-600"
aria-hidden="true"
/>
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Account Not Found
</Dialog.Title>
<div className="mt-2">
<p className="text-sm text-gray-500">
Please Make Sure You Have Entered The Correct Username
or Password that you used to register. Otherwise
change your password if you have forgotten it.
</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setOpen(false)}
>
Okay
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
);
};
export default WarnModal;
can someone explained to me where did i do wrong here, i thinks the props has been pass to the component
I've a map that creates edit and delete buttons.
The delete button needs to be confirmed.
So I created a modal.
console.log(additive._id) at the first delete button gives me the correct ._id
the confirm button inside the modal gives me always the last ._id of the array i map through, so it'll always delete the last item.
How can i get the correct ._id?
{additives.sort(byId).map((additive) => (
<div key={additive._id}>
<div>
<div </div>
<div>{additive.additive[0]?.label}</div>
</div>
<div className='flex justify-between items-center'>
<button
onClick={() =>
editAdditive(
additive._id,
additive.additive[0]?.value,
additive.additive[0]?.label
)
}>
Edit
</button>
<button
onClick={() => {
setShowModal(!showModal);
console.log(additive._id);
}}
>
Delete
</button>
{showModal && (
<>
<div
className='backdrop'
onClick={(e) => {
if (e.target.className === 'backdrop') {
setShowModal(false);
}
}}
>
<div className='relative w-auto my-6 mx-auto max-w-3xl'>
<div className=' rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
<div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t bg-gray-600'>
<h3 className='text-3xl font-semibold text-red-500'>
Delete Additive
</h3>
</div>
<div className='relative p-6 flex-auto bg-gray-600'>
<p className='my-4 text-white text-lg leading-relaxed'>
Are you sure?
</p>
</div>
<div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b bg-gray-600'>
<button
className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => setShowModal(!showModal)}
>
Cancel
</button>
<button
className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => {
deleteAdditive(additive._id);
setShowModal(!showModal);
console.log(additive._id);
}}
>
Confirm
</button>
</div>
</div>
</div>
</div>
</>
)}
</div>
</div>
))}
store the additive id in a state and use it in the modal
const [additiveId, setAdditiveId] = useState()
<button
onClick={() => {
setShowModal(!showModal);
setAdditiveId(additive._id)
console.log(additive._id);
}}
>
Delete
</button>
<button
className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
type='button'
onClick={() => {
deleteAdditive(additiveId);
setShowModal(!showModal);
console.log(additiveId);
}}
>
Confirm
</button>
I'm building a social media app using React, Firebase, and Tailwindcsss.
I want to add an emoji picker to the new post input and be able to add the emojis to firebase firestore.
Code:
NowPost.jsx:
const NewPost = () => {
return (
<>
<div className="bg-white rounded border border-gray-300 px-5 py-3">
<form onSubmit={handleSubmit} className="flex justify-between gap-6">
<div className="flex items-center justify-center text-white uppercase text-xl w-10 h-10 rounded-full cursor-pointer bg-green-700">
<div>{user?.displayName.charAt(0)}</div>
</div>
<input
type="text"
value={post}
onChange={(e) => setPost(e.target.value)}
className="bg-gray-200 rounded-2xl w-8/12 py-2 px-3 focus:ring-orange-500 focus:ring-1 outline-none"
placeholder="what are you thinking about?"
/>
<div>
<button
type="submit"
className="flex items-center gap-2 transition-all duration-100 bg-orange-500 hover:bg-orange-600 rounded-lg p-3 text-white"
>
Post <IoSend />
</button>
</div>
</form>
</div>
</>
);
};
I am trying to implement a simple age verification modal in a react app that I would like to launch only once; when a user first accesses my app. However, currently the modal pops up every time the page is refreshed or a redirect to a new page is clicked and I cannot stop this from happening even though I have coded the state to be set open once the confirm button is clicked.
The code for my modal component is as follows;
import { Fragment, useRef, useState } from 'react'
import { Dialog, Transition } from '#headlessui/react'
import { ExclamationTriangleIcon } from '#heroicons/react/24/outline'
import Modal from 'react-modal';
export default function Example() {
const [open, setOpen] = useState(true)
return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => null}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-xl font-medium leading-6 text-gray-900">
Age Verification
</Dialog.Title>
<div className="mt-2">
<p className="text-md text-gray-500">
You must be over 18 to enter.
</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-purple-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setOpen(false)}
>
Confirm
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}
Can help me with how I could set the state to be closed on first launch and then to open once 'confirm' is clicked and have it stay that way?
Thank you
Im creating a form for signing in and im getting this error. i've seen solutions for class based components but haven't seen one for function based. can anyone provide a solution? I do forms like this all the time but this never has occurred. I have a login form in my code as well but im not receiving an error for that. My code will be below.
h
const Signup = ({ signup, isAuthenticated }) => {
const [form, setForm] = useState({
name: '',
email: '',
password: ''
})
const { name, email, password } = form
const navigate = useNavigate()
const handleChange = (e) => {
e.preventDefault();
setForm({...form, [e.target.name]: e.target.value})
}
const handleSubmit = (e) => {
e.preventDefault()
if(!name || !email || !password) {
toast.error("Please provide values in each input field")
} else {
signup(name, email, password)
setForm('')
}
}
if(isAuthenticated) return navigate('/app/logout')
return (
<div className='flex h-screen justify-center items-center bg-blue-400'>
<div className="block p-6 rounded-lg shadow-lg bg-white max-w-md">
<form onSubmit={handleSubmit}>
<div className="grid grid-cols-2 ">
<div className="form-group mb-6">
<input onChange={handleChange} name='name' value={name} type="text" className="form-control block w-full px-3 py-2 text-base font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Name"/>
</div>
</div>
<div className="form-group mb-6">
<input onChange={handleChange} name='email' value={email} type="email" className="form-control block w-full px-3 py-1.5 text-base font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput125"
placeholder="Email address"/>
</div>
<div className="form-group mb-6">
<input onChange={handleChange} name='password' value={password} type="password" className="form-control block
w-full
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Password"/>
</div>
<button type="submit" className="
w-full
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Sign up</button>
<p className="text-gray-800 mt-6 text-center">Already a user? <Link to="/login"
className="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Login</Link>
</p>
</form>
</div>
</div>
)
}
Signup.propTypes = {
signup: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool,
}
const mapStateToProps = (state) => ({
isAuthenticated: state.auth?.isAuthenticated,
})
export default connect(mapStateToProps, { signup })( Signup )
const Login = ({ login, isAuthenticated }) => {
const [form, setForm] = useState({
email: '',
password: '',
})
const { email, password } = form
const navigate = useNavigate()
const handleChange = (e) => {
e.preventDefault();
let { name, value } = e.target
setForm({...form, [name]: value})
}
const handleSubmit = (e) => {
e.preventDefault()
login(email, password)
setForm('')
}
if(isAuthenticated) return navigate('/logout')
return (
<div className= 'bg-blue-400 flex justify-center h-screen items-center'>
<div className="block p-10 pl-20 pr-20 pt-10 pb-8 rounded-lg shadow-lg bg-white max-w-sm">
<form onSubmit={handleSubmit}>
<div className="form-group mb-6">
<label className="form-label inline-block mb-2 text-gray-700">Email address</label>
<input name='email' value={email} onChange={handleChange} type="email" className="form-control block w-15 px-7 py-1.5 text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Enter email"/>
</div>
<div className="form-group mb-6">
<label className="form-label inline-block mb-2 text-gray-700">Password</label>
<input name="password" value={password} onChange={handleChange} type="password" className="form-control block w-15 px-7 py-1.5 text-base font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
placeholder="Password"/>
</div>
<button type="submit" className=" w-full px-6 py-2.5 bg-blue-600 text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg
transition
duration-150
ease-in-out">Sign in</button>
<p className="text-gray-800 mt-6 text-center">Not a user? <Link to="/signup"
className="text-blue-600 hover:text-blue-700 focus:text-blue-700 transition duration-200 ease-in-out">Sign Up</Link>
</p>
</form>
</div>
</div>
)
}