State management in React Dynamic from JSON

Question

I have a dynamic form templated this way:

class betClient extends Component(
  state = {
    .............
  }
  ................

  const ServerConfigDetails = this.state.ServerConfigDetail.map(field => {

    let SecretFields = "access_token" || "api_token" || "private_token" || "password" || "security_token" || "client_secret" || "refresh_token" || "oauth_client_id" || "oauth_client_secret" || "developer_token"
    if (field.name === SecretFields) {
      return <SecretInput inputlabel = {
        field.name == SecretFields ? field.name : null
      }
      placeholder = {
        field.placeholder
      }
      />
    }
    if (field.name === "start_date") {
      return <SelectDateInput inputlabel = "Start Date" / >
    }
    if (field.name === "end_date") {
      return <SelectDateInput inputlabel = "End Date" / >
    }


    // Here we template all other fields that aren't date or secret field
    if (field.name !== SecretFields) {
      return <TextInputs inputlabel = {
        field.label == null ? field.name : field.label
      }
      placeholder = {
        field.placeholder
      }
      />
    }
  })
  render() {
    return (
          <div>
           <Modal>
             <form> 
              {ServerConfigDetails}
            </form>
           </Modal>
         </div>
     )
  }
)

Everything works fine, the form is rendered dynamically but I somehow don't know how to get the form inputs preferably as an object into a state without having to declare each field individually in the initial state. Any help with this?

Not sure if this is clear enough but I will gladly provide any extra information.

Does this answer your question? [Get form data in ReactJS](https://stackoverflow.com/questions/23427384/get-form-data-in-reactjs) — Randy Casburn, Nov 28 '20 at 23:24
@RandyCasburn, No, not exactly, I know of this option but it would be difficult to manage in our case. Was wondering if I could get the form data without manually creating a state object with each field as key - a total of 64 possible fields that can be randomly matched to create individual forms. — Paschal, Nov 28 '20 at 23:33
[FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) is your friend then. Some of these may also help: https://stackoverflow.com/questions/42316604/how-to-implement-a-dynamic-form-with-controlled-components-in-reactjs -- https://stackoverflow.com/questions/42387559/how-to-create-a-dynamic-html-form-in-reactjs-using-json-data -- — Randy Casburn, Nov 28 '20 at 23:42

score 1 · Answer 1 · answered Nov 28 '20 at 23:45

I would first suggest, we should decide how our state might look like -

{
selects: {
 // With individual keys with default values
},
dynamic: {} // no key-value pairs at first
}

Then make all your components - controlled - you control what to set by passing a value prop (and finally passing to your native inputs)


const { selects, dynamic } = this.state;

// pass a value prop as selects.<key-name> or empty string

And finally add onChange handlers for both your select and dynamic input field components. (and finally passing to your native inputs)

onChangeSelectField (event, fieldName) {}
//Same for InputField

These handlers will handle state such that keys are added if not present with value from the event target; add replace (overwrite) current key-value if a new value is entered.

{
    const currentDynamicData = this.state.dynamic;
    const newData = { ... currentDynamicData, {... updatedData}}; // updatedData is newer key-value pair

this.setState({ dynamic: newData });
}

This one is way to go about it.

State management in React Dynamic from JSON

1 Answers1