redux-form

I would like to ask, here's the scenario. I have this multiple checkbox but my problem is whenever I tick one checkbox, all of the 4 checkboxes are selected. And also why is it the value of checkbox is just true or false.Here's my checkbox: <div className="checkbox"> <label><Field name="investor_stage" component="input" type="checkbox" value="Seed" /> Seed</label> </div> <div className="checkbox"> <label><Field name="investor_stage" component="input" type="checkbox" value="Early Stages" /> Early Stages</label> </div> <div className="checkbox"> <label><Field name="investor_stage" component=

I am having some issues with setting the inital form field values using redux-form. I am using redux-form v6.0.0-rc.3 and react v15.3.0. So here's my issue, I have a grid of users and when a user row is clicked on, I am navigating to an edit users page and including the users id in the url. Then on the edit users page, I am grabbing the id and calling fetchUser(this.props.params.id) which is an action creator that returns this.state.users. I am then attempting to set the forms inital values by calling: function mapStateToProps(state) { return { initialValues: state.users.user } } By my

I am not passing in any special config settings nor am I setting/or calling Destroy... but my state is being cleaned... anyway to prevent this? I need the state to stick around as I need that data thruout my application. prev state: I see it in there... via redux-logger action: redux-form/Destroy next state: it's gone. The form's state subtree is destroyed when the form is unmounted, by design. This is the default and expected behaviour. From v6.2.1 onwards there is a form config property destroyOnUnmount , which explicitly enables/disables the state-clearing behaviour on a specific form (

I can't get correct value into the store when trying to upload a file. Instead of file content, I get something like { 0: {} } . Here's the code: const renderInput = field => ( <div> <input {...field.input} type={field.type}/> { field.meta.touched && field.meta.error && <span className={styles.error}>{field.meta.error}</span> } </div> ); render() { ... <form className={styles.form} onSubmit={handleSubmit(submit)}> <div className={styles.interface}> <label>userpic</label> <Field name="userpic" component={renderInput} type="file" /> </div> <div> <button type="submit" disabled={submitting}>Submit

I believe in any application there should be one source of truth. My app will be having 90+ transaction forms and 150 reports Complex data structures (parent level, child level, computations) So in React I found three confusing places to store state: Component state - use when we don't want to share data Redux custom store (managed by developer) - use when we want to share data Redux-form store (managed by redux-form) - use for validation I started using redux form just for validation , and then I got confused when it allowed me to access redux-form store for data as I was already accessing

I have been trying to figure out the best way to manage my react forms. I have tried to use the onChange to fire an action and update my redux store with my form data. I have also tried creating local state and when my form gets submitted I trigger and action and update the redux store. How should i manage my controlled input state? You can use the component's own state. And then take that state and give it as an argument to the action. That's pretty much the "React way" as described in the React Docs . You can also check out Redux Form . It does basically what you described and links the form

I have a redux-form specific question. I have a hidden input in my form: <input type="hidden" {...field} /> And would like to perform some asynchronous validation by making a request to the server. What is the most elegant/appropriate way to achieve this? I've been looking into Asynchronous Blur Validation, which seems like the right thing except for the fact that a hidden input doesn't seem to be able to trigger a blur event. EDIT I managed to get what I wanted by hooking up the following middleware code to Redux: if (action.type === ActionTypes.MY_EVENT) { MyModule.asyncValidate({ myField: