@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 Gijo, Thanks for your support. I got to know that my server is not working on react build. Now I think this is not a problem with heroku. But I couldn't figure out why did server not working on build. Is that any path related issue?
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> & #x20b9; {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;
Super!.. I really liked the way you explained. because I went through this situation. Thanks Vishwa Bhat . I have one more question for you, As a beginner, is it enough to start with simple unit test for my components using react default test(jest)?