Open aliMurtaja opened 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>
I used custom component for options.