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 > }})