0

I've been building a multi-step form flow in React/Gatsby, and right now i'm mapping over the form fields like so.

{clientContactDetailsData.map((item, idx) => (
    <>
        <Form.Label className="d-block text-left mb-0">{item.name}</Form.Label>
        <Form.Control
            type="text"
            name={item.name}
            className="selectButtons"
            onChange={handleChange(item.value)}
            defaultValue={values}
        />
    </>
))}

name and value come from a JSON object that i'm exporting. name: 'Full Name', value: 'fullName'

For defaultValue, I'm passing a values variable through props. It's built as an object for all of the different fields:

const values = { clientType, clientGoal, clientDetails, contactPreference, fullName, companyName, email, phoneNumber };

The fields I'm using for clientContactDetailsData are only fullName, companyName, email, phoneNumber, so my goal is to map over only these, and pass them to the defaultValue property, so that when I show a confirmation of the details, the values that the user entered will show. Full Name: John

John White
  • 121
  • 4
  • 20
  • JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. – T.J. Crowder Jun 17 '20 at 17:57
  • 1
    Is the question how to pick out the correct value from `values` for each `defaultValue` prop for the `Form.Control`? If so, the answer is [`defaultValue={values[item.name]}`](http://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable). – T.J. Crowder Jun 17 '20 at 17:59
  • 1
    @T.J.Crowder thank you! that was it – John White Jun 17 '20 at 18:20

0 Answers0