locked
1 last form question react RRS feed

  • Question

  • User1034446946 posted

    Hi

    I am coming from mapping form elements in c# mvc, where i use the name of the form element submit complex models to the cotroller, eg name='someproperty.nestedproperty' or name='somebproperty[0].nestedpropery2', it very easy to see how everything maps together.

    looking through some tutorials i am thinking of normalising all my models and linking them through ids using uuid

    but i have no idea how to get a parent id or type in order to map it in the state.

    I could pass the id and type down through props then add it to the form element using data attributes.

    But is there a better way?oram i on the right track?

    Tuesday, September 3, 2019 11:29 AM

Answers

  • User-474980206 posted

    instead of using arrays, you need to use tree's (nodes) with back links for your data structure.  you may need to mark the back link [JsonIgnore] or it will not serialize.

    Not sure what is wrong with arrays. you should flatten your view models for simplicity, but using arrays is fine.  as you are probably posting json, rather than form posts, keep the structure in the name is not so useful. the mapping to state function should handle this (depending on the state management).

    with complex objects, your big decision is how to do binding. 

        <input type="text" value={a[i].b} onChange={<big decision>} >

    the on change should call a reducer, and you need to decide how to pass the path. you could use json path, an immutable library, etc. here is a nice review of the popular immutable libraries:

         https://dev.to/glebec/four-ways-to-immutability-in-javascript-3b3l

    I tend to use HOC with binding support (with the MVC binding syntax) so I have something like:

         <TextInput binding={`a[${i}].b`}  />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 3, 2019 3:55 PM

All replies

  • User475983607 posted

    EnenDaveyBoy

    Hi

    I am coming from mapping form elements in c# mvc, where i use the name of the form element submit complex models to the cotroller, eg name='someproperty.nestedproperty' or name='somebproperty[0].nestedpropery2', it very easy to see how everything maps together.

    looking through some tutorials i am thinking of normalising all my models and linking them through ids using uuid

    but i have no idea how to get a parent id or type in order to map it in the state.

    I could pass the id and type down through props then add it to the form element using data attributes.

    But is there a better way?oram i on the right track?

    The standard programming method is crafting a JSON object model that defines the related records.   It's not clear why you are having this issue.  Perhaps share some code that illustrates this issue.  But, yes, I assume props is the best way to pass a values to child components.

    Tuesday, September 3, 2019 11:55 AM
  • User-474980206 posted

    instead of using arrays, you need to use tree's (nodes) with back links for your data structure.  you may need to mark the back link [JsonIgnore] or it will not serialize.

    Not sure what is wrong with arrays. you should flatten your view models for simplicity, but using arrays is fine.  as you are probably posting json, rather than form posts, keep the structure in the name is not so useful. the mapping to state function should handle this (depending on the state management).

    with complex objects, your big decision is how to do binding. 

        <input type="text" value={a[i].b} onChange={<big decision>} >

    the on change should call a reducer, and you need to decide how to pass the path. you could use json path, an immutable library, etc. here is a nice review of the popular immutable libraries:

         https://dev.to/glebec/four-ways-to-immutability-in-javascript-3b3l

    I tend to use HOC with binding support (with the MVC binding syntax) so I have something like:

         <TextInput binding={`a[${i}].b`}  />

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 3, 2019 3:55 PM
  • User1034446946 posted

    instead of using arrays, you need to use tree's (nodes) with back links for your data structure.  you may need to mark the back link [JsonIgnore] or it will not serialize.

    Not sure what is wrong with arrays. you should flatten your view models for simplicity, but using arrays is fine.  as you are probably posting json, rather than form posts, keep the structure in the name is not so useful. the mapping to state function should handle this (depending on the state management).

    with complex objects, your big decision is how to do binding. 

        <input type="text" value={a[i].b} onChange={<big decision>} >

    the on change should call a reducer, and you need to decide how to pass the path. you could use json path, an immutable library, etc. here is a nice review of the popular immutable libraries:

         https://dev.to/glebec/four-ways-to-immutability-in-javascript-3b3l

    I tend to use HOC with binding support (with the MVC binding syntax) so I have something like:

         <TextInput binding={`a[${i}].b`}  />

    soyou use a binding string in a prop to reference the location in state? beats the hell out of how i was about to do it.

    I was going to go from

    category:{ name: '', tags: [{id:'', name''}]
    
    

    to

    category : {name :'', tags []}
    tags : [{id:'', name:''}]

    up untill now i was thinking of state as seperate states, eg in the 'to' example,I was viewing them both as different (category and tags),but they aren't,I also though accessing the store in lots of components was a bad thing,  and in the first example I was thinking I needed to call tags directly, but that why there are immutable libraries.

    Tuesday, September 3, 2019 5:18 PM
  • User1034446946 posted

    i keep forgetting the page doesn't reload.

    Tuesday, September 3, 2019 6:41 PM