Giter VIP home page Giter VIP logo

Comments (12)

erikras avatar erikras commented on August 21, 2024 2

Like this?

Edit 🏁  React Final Form - Deep Fields

from react-final-form.

kavink avatar kavink commented on August 21, 2024 1

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

from react-final-form.

kavink avatar kavink commented on August 21, 2024

@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"
  }
}

from react-final-form.

erikras avatar erikras commented on August 21, 2024

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}.

from react-final-form.

kavink avatar kavink commented on August 21, 2024

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

from react-final-form.

erikras avatar erikras commented on August 21, 2024

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

👍

from react-final-form.

kavink avatar kavink commented on August 21, 2024

@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.

from react-final-form.

kavink avatar kavink commented on August 21, 2024

@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 ?

from react-final-form.

erikras avatar erikras commented on August 21, 2024

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?

from react-final-form.

kavink avatar kavink commented on August 21, 2024

@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.

from react-final-form.

erikras avatar erikras commented on August 21, 2024

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

Edit 🏁 React Final Form - Field Arrays

from react-final-form.

lock avatar lock commented on August 21, 2024

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.

from react-final-form.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.