Does redux-form field value can hold object instea

Question

Does redux-form field value can hold object instead of just a string?

Consider following example

    class SelectQuestions extends Component{
          render(){
    const {fields:{question1,question2},handleSubmit}=this.props;
    return <div>
    <form onSubmit={handleSumbit(this.handleFunction.bind(this))}>
        <SelectQuestion {...question1}/>
        <SelectQuestion {...question1}/>
       <button type="submit" className="btn btn-default">Submit</button>
    </form>
    </div>
    }
    }
class SelectQuestion extends Component{

render (){

 <select></select> 
}    

}

'SelectQuestion' takes array of Questions, each Question has question id and question name.

Once the user selects the question I wanted to to return QuesionId and QuesitonName. How it can be achieved using redux-form in react

Answer 1

Yes, the value can be a complex object. There's even an example demonstrating it.

Complex Values Example

Answer 2

TL:DR

Yes it can hold an object. Check out this example: https://codesandbox.io/s/vq6k6195rl

Explanation:

For a select, you can define your selects like this:

const myFancyQuestions = [
  { id: 1, label: 'Why?', category: 'Asking why' },
  { id: 2, label: 'Who?', category: 'Asking who' },
  { id: 3, label: 'When?', category: 'Asking when' }
];

Then wrap your component with Field component.

<Field component={ObjectSelect} name="myFancySelect" options={myFancyQuestions}/>

And then just show it in your render:

class ObjectSelect extends React.Component {
  render() {
    const { input, multiple, options, value, ...rest } = this.props;
    const parse = event => {
      // This is what redux-form will hold:
      return JSON.parse(event.target.value);
    }
    return (
      <select
        onBlur={event => input.onBlur(parse(event))}
        onChange={event => input.onChange(parse(event))}
        {...rest}>
          {options.map(option =>
            <option key={option.id} 
                    value={JSON.stringify(option)} 
                    selected={input.value.id == option.id}>
              {option.label}
            </option>)}
      </select>
    )
  }
}

Answer 3

I think the better way to achieve that is to create two virtual fields selectedQuestionId and selectedQuestionName. Those fields are not to display. Then, each SelectQuestion can trigger a callback like:

setSelectedQuestion = (event) => {
  var questionName = event.target.name; //or something like that
  var questionId = event.target.id; //or something like that
  this.props.fields.selectedQuestionName.onChange(questionName );
  this.props.fields.selectedQuestionId.onChange(questionId );
}

onChange can be called on redux-form fields to programmatically set the value.

Answer 4

This is a bit late, but still..

Yes, it can! You can simply use a FormSection here.

It will split your form to an objects under the hood, and will keep all sections separtely in your single form object.

Just need to pass a name prop to the FormSection, that will be a name of your sub-object.

import { FormSection } from 'redux-form';

render(){
  return(
      <form onSubmit={...}>
        <FormSection name="firstGroup">
            <SelectQuestion {...question1}/>
        </FormSection>

        <FormSection name="secondGroup">
            <SelectQuestion {...question1}/>
        </FormSection>
       <button type="submit" className="btn btn-default">Submit</button>
      </form>
  )
}

Then check your form structure through the Redux devTools.

Enjoy ;)