Nothing here yet.
I am available for teaching WordPress and ReactJS.
No blogs yet.
Good question...! So you need to do something like this: constructor(props){ super(props); this.state = { data: [], total:null, currentCount:3, offset:3, }; this.loadOnScroll = this.loadOnScroll.bind(this); this.loadInitialContent = this.loadInitialContent.bind(this); } componentDidMount () { window.addEventListener('scroll', this.loadOnScroll); } componentWillMount(){ this.loadInitialContent(); } loadInitialContent(){ fetch( APIurl , { method: "GET", headers: { "Content-Type": "application/json" }, credentials: "same-origin" }) .then( response => response.json() ).then( myData => { let ary = myData.slice(0,this.state.offset) this.setState({ data: ary, list: myData, total: myData.length }); } ) } componentWillUnmount(){ window.removeEventListener('scroll', this.loadOnScroll); } loadOnScroll = (e) =>{ //If all the content loaded if(this.state.currentCount >= this.state.total) return; //Get div at the bottom of the content var el = document.getElementById('content-end'); if(el) { var rect = el.getBoundingClientRect(); var isAtEnd = ( rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); //User at the end of content. load more content if(isAtEnd){ //If content list is still loading do not request for another content list. if(this.state.isFetching) return this.setState({isFetching:true}); var count = this.state.currentCount + this.state.offset if(this.state.currentCount <= this.state.total){ this.setState({ isFetching:false, currentCount:count, data: this.state.list.slice(0, count) }) } } } render() { return ( <section> <div className="content"> your contents here .... </div> <div id="content-end" > { /* Start load more content when this div is visible*/ (this.state.currentCount <= this.state.total && this.state.isFetching)? <span>Loading Content...!!</span> : null } </div> </section>
Hey Diego Bernal: The Formik and yup is working great for me. Now i need to validate a phone number and i also tried this solution. https://stackoverflow.com/a/53210158/7995957 But it is not working. So do you know any other solution ? const phoneReg = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/ const accountInfoSchema = Yup.object().shape({ phone: Yup.string() .matches(phoneReg, 'Enter valid phone number') .required('Required'), });
So far i solved this question by following way. constructor(props){ super(props); this.state = { title: "Save", savedId: [], }; this.savePost = this.savePost.bind(this); } ---------------------------------------------------------------------- savePost = (item, e) => { if( item.save_post_status == false ){ this.state.savedId.push(item.id); //push each id in the savedId array. this.setState({ title: "Post Saved" }) let savePostsAPI = API URL, fetch( savePostsAPI , { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, }) } } Now in the html i used includes method for comparing the array values. { this.state.itemData.map((item,index) => { let boundItemClick = this.savePost.bind(this, item); <li> <Link to="#!" className="trans" title="Save" data-id={item.id} onClick={boundItemClick}> { item.save_post_status === false ? this.state.savedId.includes(item.id) ? <img className="svg" src={ imgurl_after } alt="img" /> : <img className="svg" src={ imgurl_before } alt="img" />} </Link> </li> }})