Reactjs – How to configure Material-UI Autocomplete with secondaryText on dynamic data

autocompletematerial-uireactjs

I'm facing a issue and I feels like lacking documentation around this.

I'm build a site where I get an AutoComplete component to search for data in the database, and it's working fine, it gets the data, I've build validation working on this, everything goes ok.

If I use only one Text to render on the MenuItem it works fine, like display a name property I've got from database, but if I try to display something like Name as a primaryText and Size as a SecondaryText it simply doesn't render the autocomplete menuItem results, even being filled correctly.

For the record I'm trying to achieve something like this: https://cloud.githubusercontent.com/assets/9424409/17258323/33764c38-557b-11e6-808c-ac22287703d0.gif

But I can only make component work with something like this: https://cloud.githubusercontent.com/assets/9424409/17258376/66015990-557b-11e6-8c12-9016da6e1f2e.gif

Here is the code as it works and render my data, using only textKey:

this.dataSourceConfig = {text: 'textKey',  value: 'valueKey', validationKey:'validationKey'};

this.state = {
  dataSourceDrug:[{textKey: 'Text data goes here', valueKey: "", validationKey:'validation value goes here'}]}

render(){
    return(
        <AutoComplete
         onNewRequest={this.onDrugNewRequest}
         onUpdateInput={this.handleDrugUpdateInput}
         searchText={this.state.valueDrug}
         dataSource={this.state.dataSourceDrug}
         dataSourceConfig={this.dataSourceConfig}
        />
      )
    }

So how can I configure this to work rendering primary and secondary text?

I've checked docs and even issues on git but it doesn't says much to me:

http://www.material-ui.com/#/components/auto-complete

https://github.com/callemall/material-ui/issues/4852

https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/AutoComplete/ExampleDataSources.js

Best Answer

Ok, I found the answer thanks to the light @awzx answer brought to me.

I was working with dataSourceConfig and dataSource, and to work woth primary and secondary text, it does NOT work with dataSourceConfig, so I removed the attribute from my component

dataSourceConfig={this.dataSourceConfig}

And in my for to place the data I've done this:

var updatedDataSource = [];
for (var i = 0; i < response.length; ++i) 
{
  var _name = response[i].name;
  var _size = response[i].size;
  var _val = <MenuItem primaryText={_name} secondaryText={_size}/>
  updatedDataSource.push({text:response[i].name, value:(_val), valueKey:response[i].id, validationKey:'validation string here'});
}
this.setState({dataSourceDrug:updatedDataSource});
Related Topic