Material ui autocomplete issue with default value in React

Question

I'm using redux-form with material ui autocomplete field.

What I need to do is:

when page load autocomplete value would be empty .

When user start to type and reach to 3 character I want to call API and the result of that API I want to show as autocomplete dataSource.

What I have tried:

I tried to not set dataSource and in seconde try I set dataSource={} in both the case I got same error message:

Failed prop type: The prop dataSource is marked as required in AutoComplete, but its value is undefined.**

Home.js class code

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import AutoComplete from 'material-ui/AutoComplete';
import {connect} from 'react-redux';

class Home extends Component {

renderAutoComplete = ({
                          input,
                          label,
                          meta: {touched, error},
                          children,
                          ...custom
                      }) => (
    <AutoComplete
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        onChange={(event, index, value) => input.onChange(value)}
        children={children}
        {...custom}
    />

)

render() {

    const startDate = new Date();

    const {handleSubmit} = this.props;

    return (

        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>


            <div>
                <Field name="Origin_1" label="FROM" component={this.renderAutoComplete} dataSource={}/>
            </div>



            <div>
                <button type="submit">
                    Submit
                </button>
            </div>

        </form>

    );

}

}

const LogInForm = reduxForm({
form: 'MaterialUiForm', // a unique identifier for this form
validate
})(Home);
export default connect(mapStateTOProps, {getCity})(LogInForm);

Answer 1

From the demo and source code comments, you can see that value for the dataSourse property need to be an array:

/**
 * Array of strings or nodes used to populate the list.
 */
 dataSource: PropTypes.array.isRequired,

so you can do the following:

1. Set initial value of the dataSource as empty array

2. Do the API call when the length of inputed value will be more like 3 symbols

3. Update dataSource property on api responce callback

Also keep in mind that if you will use the array of objects for the value of dataSourse, each object need to have 'text' and 'value' keys:

const dataSource = [
  {text: 'Some Text', value: 'someFirstValue'},
  {text: 'Some Text', value: 'someSecondValue'},
];

or additional dataSourceConfig for mapping:

const dataSourceCustomKeys = [
  {textKey: 'Some Text', valueKey: 'someFirstValue'},
  {textKey: 'Some Text', valueKey: 'someSecondValue'},
];
const dataSourceConfig = {
  text: 'textKey',
  value: 'valueKey',
};

Answer 2

The AutoComplete has a property called OnUpdateInput. it works similar to the keyup property. The function signature would be as:- function(searchText: string, dataSource: array, params: object) => void searchText would be the argument that you should pass to make a validation.

Create a function and pass an argument and check whether the argument.length>=4. eg:

check(query){ if(query>=4){ //call API or pass it to actions and then to the reducer and then API }