form in react js use ing tailwindcss

Mohammed Ahmed Arafat answered on September 14, 2023 Popularity 9/10 Helpfulness 2/10

answer form in react js use ing tailwindcss

form in react js use ing tailwindcss

Comment

import { useState } from 'react';
import { loginFields } from "../constants/formFields";
import Input from "./Input";

const fields=loginFields;
let fieldsState = {};
fields.forEach(field=>fieldsState[field.id]='');

export default function Login(){
    const [loginState,setLoginState]=useState(fieldsState);

    const handleChange=(e)=>{
        setLoginState({...loginState,[e.target.id]:e.target.value})
    }


    return(
        <form className="mt-8 space-y-6">
        <div className="-space-y-px">
            {
                fields.map(field=>
                        <Input
                            key={field.id}
                            handleChange={handleChange}
                            value={loginState[field.id]}
                            labelText={field.labelText}
                            labelFor={field.labelFor}
                            id={field.id}
                            name={field.name}
                            type={field.type}
                            isRequired={field.isRequired}
                            placeholder={field.placeholder}
                    />
                
                )
            }
        </div>

       

      </form>
    )
}

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.loginradius.com

Tags: javascript tailwind-css

Link to this answer
Share Copy Link