V3 React Form Mdb5 Fields Component With Rows And Columns UseState Object Array
Use this component as a template for MDB version 5 to generate fields in react with an object. React Mdb5 Form Fields Component - Generators Using Usestate Object Array With Update Values [5231], Last Updated: Thu Nov 23, 2023
alex
Thu Nov 16, 2023
0 Comments
31 Visits
A screen shot of the signup form in Upload Image App.
This is the upload version 2 using MDB version 5. In small screen version, the columns will become only one column. MBD uses bootstrap : https://mdbootstrap.com/docs/react/layout/grid/
Source: /f/apachefriends/xampp/htdocs/over-imgV5/REACT/Version2/OPENSOURCE/MDB/mdb5/src/pages/start/upload/Upload.jsx
import { MDBBtn, MDBCol, MDBInput, MDBRow, MDBSpinner, MDBTextArea, MDBValidation, MDBValidationItem } from "mdb-react-ui-kit";
Define the Object Array
const [formValue, setFormValue] = useState([
{ divider: "Your Information" },
// name row
{
files_fname: {
value: 'Edward',
errorMsg: 'Please enter your first name.',
type: 'text',
label: 'First Name',
divider: "Your Information" // ADD A DIVIVER BEFORE THIS FIELD
},
files_lname: {
value: 'Smith',
errorMsg: 'Please enter your last name.',
type: 'text',
label: 'Last Name',
}
},
// Contact row
{
files_phone: {
value: '2135551212',
errorMsg: 'Please enter your phone number.',
type: 'text',
label: 'Phone Number',
},
files_email: {
errorMsg: 'Please enter a valid email',
type: 'email',
label: 'Your email',
}
}
, {
// DETAILS GROUP
files_title: {
value: 'Homework Files',
errorMsg: 'Please enter brief description of your files',
type: 'text',
label: 'Documents Title',
},
files_description: {
value: 'These are the pictures you can use for your pumkin project.',
errorMsg: 'Please enter a Description of what the files are about.',
type: 'textarea',
label: 'Documents Description'
}
},
{ divider: "Recipient's Information" },
{
recipient_fname: {
value: 'Sandy',
errorMsg: 'Please enter the recipients\'s first name.',
type: 'text',
label: 'First Name',
divider: "Recipient's Information" // ADD A DIVIVER BEFORE THIS FIELD
},
recipient_lname: {
value: 'Johnson',
errorMsg: 'Please enter the recipients\'s last name.',
type: 'text',
label: 'Last Name',
}
},
{
recipient_phone: {
value: '4155551212',
errorMsg: 'Please enter the recipients\'s phone number.',
type: 'text',
label: 'Phone Number',
},
recipient_email: {
errorMsg: 'Please enter a valid recipients\'semail for the ',
type: 'email',
label: 'Your email',
}
},
]);
JSX Usage:
<MDBValidation className='row g-3 ' id='myform' onSubmit={e => submitRecipientInformation(e)}>
{formValue.map((group, index) => {
return (
<div key={index}>
{
typeof group.divider != "undefined" ?
<h4 className="my-3 text-center" style={{ borderBottom: '1px solid #000', lineHeight: '0.1em', margin: '10px 0 20x' }}><span style={{ background: "#FFF", padding: "0 10px" }}>{group.divider}</span></h4>
:
<MDBRow className="mt-3" >
{Object.entries(group).map(([fieldname, field], index2) => {
return (
<MDBCol key={index2} size={`md-${ 12/Object.entries(group).length }`}>
<MDBValidationItem feedback={field.errorMsg} invalid className='col-md-12' >
{field.type == 'textarea' ?
<MDBTextArea
value={field.value}
name={fieldname}
onChange={updateFieldValue}
required
label={field.label}
id={fieldname}
type={field.type}
rows={2}
dataIndex={index}
className={`${Object.entries(group).length>1 && 'mb-3'}`}
/>
:
<MDBInput
value={field.value}
name={fieldname}
onChange={updateFieldValue}
required
label={field.label}
id={fieldname}
type={field.type}
dataIndex={index}
className={`${Object.entries(group).length>1 && 'mb-3'}`}
/>
}
</MDBValidationItem>
</MDBCol>
)
})}
</MDBRow>
}
</div>
)
})}
<MDBBtn color="success mt-4" type='submit' block >Continue</MDBBtn>
</MDBValidation>
Update Field Value State:
const updateFieldValue = (e) => {
//https://stackoverflow.com/questions/20377837/how-to-access-custom-attributes-from-event-object-in-react
//console.log(`LINE 306 e=`, e.target.getAttribute('dataindex'));//dataIndex=1
let dataIndex = e.target.getAttribute('dataindex');
let fieldName = e.target.name;
let fieldValue = e.target.value;
// check if field is defined in formValue
let formValueTemp = [...formValue]
if (typeof formValueTemp[dataIndex][fieldName] == "undefined") {
// dont do anything if this field does not exist in the object
return false;;
}
formValueTemp[dataIndex][fieldName].value = fieldValue;
setFormValue(formValueTemp);
};