1

I'm building a react/redux app and using a ux library called Grommet in the front end. I have the app set up such that I have a series of forms contained within a set of accordions on the page. Here's a whittled downed version containing only one accordion tab:

handleCpuChange(event) {
    console.log(event.target)
    this.props.updateStore(
        {'general': {'cpus': event.target.value} }
    )
}

<Accordion>
    <AccordionPanel heading="General">
        <Box>
            <FormFields>
                <FormField label='CPUs'>
                    <NumberInput
                        value={this.props.form.formData.general.cpus}
                        onChange={this.handleCpuChange.bind(this)}/>
                </FormField>
                <FormField label='Ram'>
                     <NumberInput
                         defaultValue={this.props.form.formData.general.ram}
                         onChange={this.handleCpuChange.bind(this)}/>
                 </FormField>
             </FormFields>
         </Box>
    </AccordionPanel>
</Accordion>

- All of this works fine. The problem is that when I call the handleCpuChange function is called my state/store value gets updated - but my the actual 'value' or 'defaultValue' fields stay the same. For the most part this is no problem but if I close and reopen the accordion the values in those fields resets to the defaults/values supplied through props. I figured that a nice way around this is to remap the state to props whenever the accordion opens or closes that way the actual value updates - but I'm not sure how to do this without reloading the entire page.

John Devitt
  • 690
  • 2
  • 8
  • 22
  • 1
    You **should** be getting a re-render if the `props` are updated. Are you saying that `cpus` and `ram` *should* have different values but they don't update in the view? – Chris Feb 07 '17 at 13:06
  • They do have different values and the values *do* update in the view. These fields represent numerical inputs so I can either increment or decrement the field by 1. So for the cpus field I have it read in a default of 4. I can then increment that field and that updates my state. By when I close and reopen the accordion the value in the field has returned to 4. It's possible I'm looking at this the wrong way though - I'm starting to think I need a seperate component for each field which reloads upon a state change – John Devitt Feb 07 '17 at 13:11
  • 1
    can you somehow reformulate the question / express it in different words with an example, I think I could help you but it is really difficult to understand what your exact intentions are – Lyubomir Feb 07 '17 at 13:19
  • 1
    @JohnDevitt, Oh I think I understand what you want. You probably want to control these values in the *parent* component and pass that value down to it via `props`. When you then *re-open* the accordion, the entire component gets re-mounted so it resets to the default values (?). If this is the case I can provide an answer for you. – Chris Feb 07 '17 at 13:23
  • Yes! that's it Chris I believe! Sorry - still new new to javascript. – John Devitt Feb 07 '17 at 13:25

0 Answers0