I'm working on a project where as form.select is used and I want to be able to pull more data when at the bottom of the list. Is there a way to do this? If so could you point me in the right direction.
I have already tried the Visibility behavior with Semantic and have found little luck.
<Visibility offset={[10, 10]} onUpdate={this.handleUpdate}>
<Form.Select
label="Example"
required={true}
placeholder="Test Placeholder"
noResultsMessage="No results found for the selected product"
fluid={true}
search={true}
selection={true}
clearable={true}
value={value || ""}
options={this.state.valueList}
onChange={this.onChange.bind(value, "value")}
/>
</Visibility>
The Visibility just tracks the Form.Select on the page, not the dropdown selector.
If you have a state array, and you keep adding data dynamically, it will render automatically. Check my demo below. I made a setInterval of 1 second for you to imagine data coming every second. My state array names will update automatically. So, there is no need of having a sort of MORE OPTIONS button or keeping scrolling in your Select, because it will have the info added automatically.
import React, { Component } from 'react';
import './style.css';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
names: ["Person 1", "Person 2", "Person 3", "Person 4"],
nb: 4
};
}
render() {
setTimeout(() => {
const tmp = [...this.state.names];
const num = this.state.nb;
num++;
tmp.push("Person " + num)
this.setState({ names: tmp, nb: num });
}, 1000);
return (
<div>
<select>
{this.state.names.map((value) =>
<option value={value}>{value}</option>
)}
</select>
</div>
);
}
}
render(<App />, document.getElementById('root'));