redux form onSelect

[alexbigapps23]

hi, how I can use onSelect on the redux form ?

[Ethaan]

redux-form passess the prop input which is an Object with some methods such as onChange, and that onChange dispatch to your redux state, so.

// GoogleAutocomplete.js
import React from 'react';
import PropTypes from 'prop-types';
import { FormControl } from 'material-ui/Form';
import { InputLabel } from 'material-ui/Input';
import { withStyles } from 'material-ui/styles';
import PlacesAutocomplete from 'react-places-autocomplete';

const styles = {
  controlWidth: {
    width: '100%',
  },
};

class GoogleAutocomplete extends React.Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
    this.onAddressChange = this.onAddressChange.bind(this);
  }

  onAddressChange(address) {
    const { input } = this.props;
    const { onChange } = input;
    this.setState({ address });
    onChange(address);
  }

  render() {
    const { classes } = this.props;
    const inputProps = {
      value: this.state.address,
      type: 'search',
      placeholder: 'Search Places...',
      onChange: this.onAddressChange,
    };

    return (
      <FormControl className={classes.controlWidth}>
        <InputLabel htmlFor="address2">Address:</InputLabel>
        <PlacesAutocomplete inputProps={inputProps} />
      </FormControl>
    );
  }
}

GoogleAutocomplete.defaultProps = {
  input: {},
  classes: {},
};

GoogleAutocomplete.propTypes = {
  input: PropTypes.object,
  classes: PropTypes.object,
};

export default withStyles(styles)(GoogleAutocomplete);

// YourForm.js
<Field
 name="weight"
 type="text"
 label="Wie viel Material? (kg)"
 placeholder="Wie viel Material? (kg)"
 component={FormInput}
/>

[curtisolson]

This is an excellent example, but I think your YourForm.js doesn't match with the other code. Does the component just need to be changed to "component={GoogleAutocomplete}"?

[matiasherranz]

@Ethaan Thanks for your answer! Quick tip. You can remove this line from the constructor method:

this.onAddressChange = this.onAddressChange.bind(this);

If you define the ``onAddressChange method like this:

onAddressChange = (address) => {
  ...
}

Instead of like this:

onAddressChange(address) {
  ...
}

[ybakhshi]

@Ethaan @curtisolson @matiasherranz Thanks for your support in advance but i get this error implementing the same code

could you please explain me what i have to do to make it work?