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 inAutoComplete
, but its value isundefined
.**
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);
OP question is for old (v0) version of MUI
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:
Set initial value of the dataSource
as empty array
Do the API call when the length of inputed value will be more like 3 symbols
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',
};