Data-driven fields in React form

August 28, 2024

I’m building a form in React to support user input for CRUD operations. I’m looking to make the fields shown in the form data-driven from an array with a view to eventually be able to read them from a database, hence have the form defined in data. I’m currently looking at a Customer form, with fields defined as:

const formFields = [
    {label:'Customer Name', type:'text', name:'CustomerName'},
    {label:'Address 1', type:'text', name:'Address1'},
    {label:'Address 2', type:'text', name:'Address2'},
    {label:'Address 3', type:'text', name:'Address3'},
    {label:'Town', type:'text', name:'Town'},
    {label:'Postcode', type:'text', name:'Postcode'},
    {label:'Country', type:'text', name:'Country'},
    {label:'Phone Number', type:'text', name:'PhoneNumber'},
];

I’m using a table to display labels and input boxes, thus:

return (
  <div className="modal-overlay">
    <div className="modal-content">
      <h2>{formMode} Customer</h2>
      <form onSubmit={handleSubmit}>
        <table border="0">
            {formFields.map((field) =>
                <tr key={field.CustomerID}>
                    <td padding-right="10px"><label>{field.label}</label></td>
                    <td><input type="{field.type}"
                    name="{field.name}"
                    value={customer.CustomerName}
                    />
                    </td>
                </tr>
            )}

        </table>

        <div className="buttonBar">
            <button type="submit">{buttonText()}</button>
            <button type="button" onClick={onClose}>Cancel</button>
            {error && <p>Error: {error}</p>}
        </div>
      </form>
    </div>
  </div>
);

However I’m struggling with entering the correct React expression for the value= line. Currently all fields show the CustomerName for the customer, whereas they need to show the values of each field in customer. Ideally, I want to express value={customer.{field.name}}, but this is invalid, with the error:

SyntaxError: C:\src\CustomerForm.js: Unexpected token (85:40)

  83 |                         <td><input type="{field.type}"
  84 |                         name="{field.name}"
> 85 |                         value={customer.{field.name}}
     |                                         ^
  86 |                         />
  87 |                         </td>
  88 |                     </tr>

How can I get the name value of the field and then use that as a property of customer?

>Solution :

You don’t need to stress, you can easily access the value of a property in a JS using a variable, All you need to in this case is to use customer[field.name] instead of trying to use customer.{field.name}.

Also some places where you use quotes that should also be removed. I have modified the code a bit,

Use this code instead

<td>
   <input type={field.type}  
   type={field.type} // remove quotes for type
   name={field.name} // Remove the quotes for name                   
   value={customer[field.name] || ''}
   />
</td>