JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.63k stars 4.13k forks source link

how to apply extra element at the top of all list #5647

Open aliMurtaja opened 1 year ago

aliMurtaja commented 1 year ago

I used custom component for options.

const Option = (props) => {

    return (

           <components.Option {...props}>
            <input
                type="checkbox"
                checked={props.isSelected}
                onChange={() => null}
            />{" "}
            <label>{props.label}</label>
           </components.Option>
    );
};

so here's the code I want to wrap all option in single element, to do so i did below

    const Option = (props) => {

    return (
        <InfiniteScroll
        // className="row"
        dataLength={virtualTours.tour}
        next={fetchMoreDataForInfiniteVRtour}
        hasMore={virtualTours.setHasMoreVirtualTour}
        loader={virtualTours.tour.length > 25 ?<h4>Loading...</h4>: ""}
        endMessage={
            <p style={{ textAlign: "center" }}>
            </p>
        } 
        scrollThreshold= "300px"
        scrollableTarget= "react-select-2-listbox"
        >
            <components.Option {...props}>
            <input
                type="checkbox"
                checked={props.isSelected}
                onChange={() => null}
            />{" "}
            <label>{props.label}</label>
            </components.Option>
        </InfiniteScroll>
    );
};

but it wrapped each option with `InfiniteScroll`, but i don't want wrapped each `option`

I want like this

 <InfiniteScroll
        // className="row"
        dataLength={virtualTours.tour}
        next={fetchMoreDataForInfiniteVRtour}
        hasMore={virtualTours.setHasMoreVirtualTour}
        loader={virtualTours.tour.length > 25 ?<h4>Loading...</h4>: ""}
        endMessage={
            <p style={{ textAlign: "center" }}>
            </p>
        } 
        scrollThreshold= "300px"
        scrollableTarget= "react-select-2-listbox"
        >
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
    </InfiniteScroll>