I have following component. I am making this based on react-hook-form documentation. Additionally I add styled components. But I find out problem with button. Submit button does not works. Nothing happen when I click on it
import styled from 'styled-components'; import { useForm } from "react-hook-form"; export const OrderDetailsForm = () => { const { register, handleSubmit } = useForm(); const onSubmit = (data: any) => console.log(data); return ( <OrderDetailsFormContainer> <OrderForm onSubmit={handleSubmit(onSubmit)}> <OrderDetailsFormContent> <label>First Name</label> <OrderDetailsFormInput {...register("firstName")} /> <label>Last Name</label> <OrderDetailsFormInput {...register("lastName")} /> <label>Phone number</label> <OrderDetailsFormInput {...register("phoneNumber")} /> <label>Email</label> <OrderDetailsFormInput {...register("emailAddress")} /> <OrderDetailsFormHeader>Contact details</OrderDetailsFormHeader> </OrderDetailsFormContent> <OrderDetailsFormContent> <label>Street</label> <OrderDetailsFormInput {...register("street")} /> <label>House number</label> <OrderDetailsFormInput {...register("houseNumber")} /> <label>City</label> <OrderDetailsFormInput {...register("city")} /> <label>ZIP code</label> <OrderDetailsFormInput {...register("zipCode")} /> <OrderDetailsFormHeader>Address</OrderDetailsFormHeader> </OrderDetailsFormContent> <input type='submit' /> </OrderForm> </OrderDetailsFormContainer> ) } const OrderDetailsFormContainer = styled.main` display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; ` const OrderForm = styled.article` display: flex; justify-content: center; align-items: center; width: 1200px; ` const OrderDetailsFormContent = styled.section` display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; border: 1px solid #000; box-sizing: border-box; margin: 0 25px; width: 50%; padding: 30px 0 20px 20px; position: relative; ` const OrderDetailsFormInput = styled.input` padding: 10px 40px; margin: 15px 0; ` const OrderDetailsFormHeader = styled.h1` position: absolute; top: -4%; left: 4%; margin: 0; background-color: #fff; padding: 0 20px; font-size: 20px; ` const Button = styled.button` background-color: black; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; `
