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 })}
/>
To create an autocomplete component in React, use the react-autocomplete library. The react-autocomplete module provides properties, methods, and events that can trigger an ajax request on typing, which will fetch the list items and render them inside the render menu.
There are about eight different ways to styling React Js components, there names and explanations of some of them are mentioned below. Example 1: This example illustrates how to use inline styling to style react components. index.
There are almost endless ways to style a component in React, but using the HTML style element is one of the most creative and unusual. This approach allows you to use raw CSS while reducing your styled component definition to just one file.
Try something like:
<ReactAutocomplete
....
inputProps={{ style: { width: '100%',height: '100px'}, placeholder: 'test'}}
wrapperStyle={{ width: '100%' }}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With