CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Jeril
Jeril

Reputation: 8521

ReactJS - AutoComplete inside AppBar in Material UI

I am learning ReactJS and I built an AppBar and added a TextField inside that. It was working perfectly. The following is my code:

class Test extends React.Component {  
render() {
    return (
    <MuiThemeProvider>
      <AppBar
        title={"Benchmarking"}
        iconElementLeft={<IconButton iconClassName="muidocs-icon-custom-github" />}
        iconElementRight={
          <div>
            <TextField
                hintText='this is a sample text'
            />
          </div>
        }
      />

      </MuiThemeProvider>
    )
  }
}

Now I tried to add an AutoField in the place of TextField, its not throwing any error, but the AppBar is not displaying. What might be the problem? Kindly help.

Upvotes: 0

Views: 969

Answers (1)

mrinalmech
mrinalmech

Reputation: 2165

an AutoComplete requires the dataSource and onUpdateInput props so you will have to provide that. Do something like this

 state = {
    dataSource: [],
  };

  handleUpdateInput = (value) => {
    this.setState({
      dataSource: [
        value,
        value + value,
        value + value + value,
      ],
    });
  };

Then pass them as props in the AutoComplete

  <AutoComplete
          hintText="Type anything"
          dataSource={this.state.dataSource}
          onUpdateInput={this.handleUpdateInput}
        />

Here is the link to the AutoComplete page in Material-UI - http://www.material-ui.com/#/components/auto-complete

Upvotes: 1

Related Questions