the AutoComplete was poped out, I can't update the value, and it gives me an error. What a big mess!

[ryuujo]

I already use react-autocomplete and I found so much error (or maybe my fault).

First, the data was already called, and it shows. But when I scroll down, the Autocomplete just popped out like this picture:

Then, I can't type anything inside of it, and when I click one of them, it returns error like this:

Uncaught ReferenceError: value is not defined

This is the code that I write

<AutoComplete getItemValue={item => item.city_name} items={state.location}
          renderItem={(item, isHighlighted) =>
                 <div key={item.id} style={{background: isHighlighted ? 'lightgray' : 'white', color: 'black', fontSize:'0.5em'}}>
                         {item.city_name}
                  </div>
           } onChange={(e) => value = e.target.value} onSelect={(val) => value = val}
/>

[mslotvinskij]

I just maked own classes and use absolute not fixed

<Autocomplete
wrapperProps={{className: 'bbs_autocomplete_wrapper'}}
renderMenu={(items) =>
    <div className="bbs_autocomplete_content" children={items}/>
}
renderItem={(item) =>
    <div key={JSON.stringify(item)} className="bbs_autocomplete_item">{item.display}</div>
}   
/>    

.bbs_autocomplete_wrapper { position: relative; width: 100%; }

.bbs_autocomplete_content { position: absolute; width: 100%; max-height: 250px; top: 100%; left: 0; margin-top: 4px; border: 1px solid #ced4da; border-radius: .2rem; background: #fff; font-size: 100%; overflow: auto; z-index: 999; }

.bbs_autocomplete_content:empty { display: none; }

.bbs_autocomplete_item { padding: 0.25rem 0.5rem; font-size: 0.8125rem; color: #232323; cursor: pointer; }

.bbs_autocomplete_item:hover { background: #f0f0f0; }

[GoldbergGLG]

FYI: In my case I just needed position: relative in the wrapperStyle.