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.