reactjssemantic-uiinfinite-scroll

Is it possible to create a infinite scroll inside of a Semantic Form.Select


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.


Solution

  • 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'));
    

    Demo