React-final-form: Example request for nested objects

[kavink]

following up on #25

Would be great to have an example, like the field arrays to add/remove objects along with array.

[erikras]

Like this?

[kavink]

@erikras Not really, I am able to do that. Basically same way in Field array there are buttons to add/remove customers. Same way in this without an array.

In the example you have, You have

    <div>
      <label>{label} City</label>
      <Field
        name={`${name}.city`}
        component="input"
        placeholder={`${label} City`}
      />
    </div>

Where the city keyword is in your code and user enters just the value in text box, I want to user to even provide city keyword as a value for text box, i.e. in your example there is 1 text box, for value, I want to have 2 test box.

So user click (+) button, gets 2 text box and inserts city, San Francisco in them.

So the json will look

{
 "billing" : {
    "city": "San Francisco"
  }
}

But if the user entered town , San Francisco in the 2 text box fields.

{
 "billing" : {
    "town": "San Francisco"
  }
}

[erikras]

You want the user to enter both the key and the value?

That might require your own state management solution. Either that or using arrays of {key:string, value:string}.

[kavink]

@erikras Yes both key and value. Maybe can use array, But maybe on submit i change structure from array to object ?

[erikras]

But maybe on submit i change structure from array to object ?

👍

[kavink]

@erikras Thanks will go down that route then. Was trying to create something like a JSON editor where user can update/add/remove JSON objects or arrays. Will do some hack for objects, Arrays work just fine.

[kavink]

@erikras If I need to Load and initialize the data in array forms, Do I need to do anything special ? Also are there any api's in final-form I can use for transformation of data while loading or when submitting ?

[erikras]

No, just provide the initialValues as an object with an array inside it. At the moment, for FieldArray to work, you must provide a named key. i.e. you can't have initialValues: [ {key, value}, {key, value} ], you must do initialValues: { myValues: [ {key, value}, {key, value} ] }. Make sense?

[kavink]

@erikras, kind of makes sense, But im sure as final-form gains audience, A real example working example to refer from Readme will help everyone a lot 👍 (if you can put that up would be helpful, but I will attempt it soon too, based on your comment ) ..Thanks for great work.. I am impressed with ease of use of Final form.

[erikras]

It's not that complicated. (if I'm understanding your question) Here:

[kavink]

@erikras Perfect!!! ill refer it when I get to doing it. Thanks !

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.