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;
`

Sorry for adding this, but it throws an error It looks like your post is mostly code; please add some more details. But I don't know what I can add more to this post.

CodePudding user response：

Your issue is that you don't have a <form/> element.

Your <OrderForm/> component is rendering an <article/> element - this doesn't have an onSubmit prop, which is why the submission isn't working.

Change styled.article to styled.form here:

const OrderForm = styled.form`

CodePudding user response：

const OrderForm = styled.article`

this line will generate an article element and you know, article tag does not have onsubmit event. change this line to:

const OrderForm = styled.form

good luck.