I need to find a way to dynamically iterate through multiple input components. All inputs follow the same style pattern except for 'first name' and 'last name', which should be aligned in one row with different widths.
<div style={{flexDirection: 'column'}}>
<div style={{flexDirection: 'row'}}>
<FormInput
name="firstname"
placeholder="First name"
onChange={onChange}
value={value}
errors={errors}
width="45%"
/>
<FormInput
name="lastname"
placeholder="Last name"
onChange={onChange}
value={value}
errors={errors}
width="45%"
/>
</div>
<FormInput
name="email"
placeholder="email"
onChange={onChange}
value={value}
errors={errors}
width="90%"
/>
...
</div>
Object.entries({firstname: 'Fist Name', lastname: 'Last Name', email: 'Email', password: 'Password', passwordConfirm: 'Confirm Password'}).map(item=> {
return (
<FormInput
name={item[0]}
placeholder={item[1]}
onChange={onChange}
value={value}
errors={errors}
width=??
/>
)
})
Is there a way to loop through all input fields while accommodating the unique styling requirements of two of them? I appreciate any suggestions!