here is my code.Let me advice to style autocomplete component
<ReactAutocomplete
items={obj}
shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
getItemValue={item => item.label}
renderItem={(item) =>
<div
key={item.id}>
{item.label}
</div>}
value={this.state.value}
onChange={e => this.setState({ value: e.target.value })}
onSelect={value => this.setState({ value })}
/>
Try something like:
<ReactAutocomplete
....
inputProps={{ style: { width: '100%',height: '100px'}, placeholder: 'test'}}
wrapperStyle={{ width: '100%' }}
/>
You can't use the className property right on the autocomplete element, you have to use the "inputProps" property, it's the last property in this bit of code:
<Autocomplete
getItemValue={(item) => item.label}
items={[
{ id: "SPY", label: 'SPY' },
{ id: "MSFT", label: 'MSFT' },
{ id: "FB", label: 'FB' },
{ id: "TSLA", label: 'TSLA' },
]}
shouldItemRender={(item, value) => item.label.toLowerCase().indexOf(value.toLowerCase()) > -1}
renderItem={(item, isHighlighted) =>
<div style={{ background: isHighlighted ? 'lightgray' : 'white' }}
key={item.id}>
{item.label}
</div>
}
value={this.state.symbol}
onChange={(e) => this.setState({ "symbol": e.target.value })}
onSelect={(val) => this.setState({ "symbol": val })}
inputProps={{ className: "form-control" }}
/>
In your renderItem prop, you can add style like this:
renderItem={(item) =>
<div style={{ background: 'white' }}>
{item.label}
</div>
}