Search code examples
redux-form

How to make a custom redux-form component control multiple fields?


I want to have a Map with a draggable marker that determines both x and y fields.

<Fields names={['x', 'y']} component={Map} />

When the marker is dropped to a new location on the map, how do I tell redux-form what the new x and y values are?

http://redux-form.com/6.5.0/docs/faq/CustomComponent.md/


Solution

  • const renderMap = props => (
      <DragDrop
        image={props.image}
        currentValue={{
          x: props.x.input.value,
          y: props.y.input.value,
        }}
        thingsChanged={coords => {
          props.x.input.onChange(coords.x);
          props.y.input.onChange(coords.y);
        }} />
    )
    
    <Fields
      names={['x', 'y']}
      component={renderMap}
      image={this.state.image} />