form in react js use ing tailwindcss

Mohammed Ahmed Arafat answered on September 14, 2023 Popularity 8/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 8/10 Helpfulness 2/10 Language javascript

Source: www.loginradius.com

Tags: javascript tailwind-css

Link to this answer
Share Copy Link

Contributed on Sep 14 2023

Mohammed Ahmed Arafat

0 Answers Avg Quality 2/10

form in react js use ing tailwindcss

Contents

More Related Answers

form in react js use ing tailwindcss

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.