0

I've got a Presentational Component where I'm dynamically pulling modules based on their id (lets think of them as of snippets of HTML code including input fields, they have other functionality which is not important for these purposes). I can have multiple modules with the same id inserted in the row into the Presentational Component.

Those modules are being pulled in using redux reducer where I'm dispatching an action on button click with an ID of the module I'd like to insert to my Presentational Component and then I'm mapping through a state array pulling the modules from separate files based on those IDs.

This is my reducer for adding / removing those modules:

case RECEIVE_MODULE:
    return [
        ...state, action.receiveModule
    ]

case REMOVE_MODULE:
    return state.filter( (module, i) => ( i !== action.moduleRemoved ))

default:
    return state

in the front end each of the modules contain input fields and the problem I'm having is that when user adds multiple modules and inputs any data into those and then removes one or more of those module the data which were filled in are not stored anywhere thus would have to be inserted again every time the state array holding information about what modules are being pulled in changes.

My question is how and where would I keep the state of those input fields?!

In the module Component I have the input fields in the state:

this.state = {
    inputs: [
        { type: 'text', placeholder: 'placeholder text', name: 'text1', id: 'text1', value: '' },
        { type: 'text', placeholder: 'another placeholder text', name: 'text2', id: 'text2', value: '' },
        { type: 'text', placeholder: 'third placeholder text', name: 'text3', id: 'text3', value: '' },
    ],
}

But since I want to be able to add multiple identical modules in the row I cannot store the input values in the module itself.

I would have thought the best way would be to store the values together in the state with the ID's of modules being rendered in my Presentational Component thus I'd add another action SAVE_MODULE into my reducer.

I can pass the values from those input fields together with the position of the module in the state array into my reducer. I'm not sure how to process them.

Lets say there is 5 elements in the state array, user inputs data in element with index 3, hits save button, I pass the index and the data from the input fields as an object to my reducer:

 this.props.dispatch(actions.saveModule({key: moduleIndex, value: inputFieldsValue}))

Thus reducer receives: key:3, value: 'text in 1 input, text in 2 input, text in 3 input'

How would I process it so I can carry the data back to the input fields in the front end when the state array is 'modified' by adding / removing modules.

Hope it makes sense, let me know if you need further explanation.

Any advice / idea / tip is highly appreciated.

laser
  • 1,388
  • 13
  • 14
Michaela
  • 268
  • 2
  • 4
  • 14
  • use the position in the array as the "real" id, that forces it to be unique. – Daniel Lizik Mar 29 '17 at 15:35
  • what do you mean? i was thinking if i could preserve the keys in the state array that would help me a lot but unfortunately that's not how javascript works – Michaela Mar 29 '17 at 15:37
  • also why are you using `this.state` in a presentational component? typically presentational components are stateless – Daniel Lizik Mar 29 '17 at 15:54
  • it's in the module component, not the presentational one – Michaela Mar 29 '17 at 15:55
  • itd probably be easier to make your `Module` component be stateless and just keep your array of inputs in your state tree. dispatch on each input `onChange` to modify the `value` prop on your array depending on the index – Daniel Lizik Mar 29 '17 at 15:59
  • think i need to do something like this http://stackoverflow.com/questions/37932742/redux-how-to-add-entry-to-array-in-reducer – Michaela Mar 29 '17 at 16:06

0 Answers0