@sonusasankan
Creative coder
Nothing here yet.
Nothing here yet.
No blogs yet.
Hi Serdar, Thanks for your time. The problem is, when I select a value from first select box, that value would remove from the second one. But if I select first and second, the value from first select is showing in third select box. It should be removed from third. The logic is, If I select a value from any select box, that value should be removed from other selects.
Hi Ronald Roe, Thanks for your help. But I got an issue while implementing this which is "TypeError: Invalid attempt to spread non-iterable instance" code import React, { Component } from "react"; import "./PropertyList.css"; import furnished from "../../assets/bed.svg"; let data = []; class PropertyList extends Component { constructor() { super(); this.state = { properties: [], isLoading: true, error: null }; } componentDidMount() { fetch("http://demo8213882.mockable.io/fetchProperties") .then(response => response.json()) .then(resData => { this.setState({ properties: resData, isLoading: false }); data = resData; }) // Catch any errors we hit and update the app .catch(error => this.setState({ error, isLoading: false })); window.addEventListener('scroll', this.onScroll, false); } componentWillUnmount() { window.removeEventListener('scroll', this.onScroll, false); } onScroll = () => { if ( (window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 500)) { this.setState(prevState => ({ properties: [ ...prevState.properties, ...data // Data returned from the fetch operation ] })); console.log(data) } } render() { const { isLoading, properties, error } = this.state; return ( <React.Fragment> <div className="row"> {error ? <p>{error.message}</p> : null} {!isLoading? ( properties.data.map((item, index) => { let length = item.photos.length; return ( <div className="col-md-4 nb-card"> <div className="card"> <img className="card-img-top" src={ item.photos.length >= 1 ? "https://images.nobroker.in/images/" + item.id + "/" + item.photos[0].imagesMap.thumbnail : "https://via.placeholder.com/200X150" } alt="Card image cap" /> <div className="card-body"> <h6 className="card-title">{item.title}</h6> </div> <ul className="list-group list-group-flush"> <li className="list-group-item"> <span> <strong> ₹ {item.rent} Rent</strong> </span> </li> <li className="list-group-item"> <span> <strong>{item.propertySize} sqft</strong> </span> </li> <li className="list-group-item"> <img className="furnished-icon" src={furnished} /> {item.furnishingDesc} Furnished </li> </ul> </div> </div> ); }) ) : ( // If there is a delay in data, let's let the user know it's loading <div className="col-md-8"><p>Loading...</p></div> )} </div> </React.Fragment> ); } } export default PropertyList;