We normally use text fields with lots of similarity especially styles in our forms, they just differ in values they store, placeholders and some types they have. For that case I often iterate the array of objects (formElements) and reuse the input component.
Here is how.
Form
import React, { useState} from 'react'; const SigninForm = () => { const [formData, setFormData] = useState({}); const changeFormData = (key, value) => { const formdata = { ...formData, [key]: value, }; setFormData(formdata); }; const submitFormData = (event) => { // Submit form data here event.preventDefault(); console.log(formData); }; const formElements = [ { name: "email", type: "text", placeholder: "Email"}, { name: "password", type: "password", placeholder: "Password"}, { name: "button", type: "submit", value: "Submit"}, ]; return ( <form onSubmit={submitFormData} > {formElements.map(element => { // Return submit button if (element.type === "submit") { return ( <button key={element.name} type={element.type} onClick={submitFormData} > {element.value} </button> ); } // Return text inputs return ( <input key={element.name} type={element.type} value={formData[element.name] || ""} placeholder={element.placeholder} onChange={(e) => changeFormData(element.name, e.target.value)} /> ); })} </form> ); }; export default SigninForm; 
Top comments (0)