I am using both react and jquery separately I want bundle.js from react to fetch all api data before running jquery functions.
I have a react code loading all the images from servers / api and jquery to slide those images and managing height of the image to fit screen. I have first included bundle.js and then my custom.js file. Even though bundle.js runs first, but fetch api runs after custom.js due to which jquery is not able to slide those images.
App.js
export class App extends Component {
constructor(props){
super(props)
this.state = {
loading : false,
all_data : []
}
this.fetchFromServer();
}
fetchFromServer(){
Promise.all([
fetch("http://abcdef.com/api/slider.php",{
method : "POST",
headers: new Headers({
'Accept' : 'application/json',
}),
body: JSON.stringify({
limit : "10",
})
})
]).then(([all_post_api])=>Promise.all([all_post_api.json()])).
then(([post_data]) => this.setState({
loading : false,
all_data : post_data
}))
}
render(){
const allowRender = this.state.all_data && this.state.all_data.carousel
if (allowRender) {
return (<div className="right-content">
<Main data={this.state.all_data} />
</div>)
}
return null;
}
}
Main.js
export class Main extends Component {
render(){
console.log(this.props.data.carousel);
return (
<div className="flexslider home-page">
<ul className="slides">
{
this.props.data.carousel.map((name,index)=>{
return (
<li className="images-bg" key={index}>
<img src={name.url} />
<div className="circle">
<div className="home-title left">
<span>
Welcome <strong>to</strong>
</span>
<span>
<strong>foto</strong>hunter
</span>
<p>Only the best pictures of animals and travel.</p>
</div>
<a className="button-down glyph fa-angle-down" href=""></a>
</div>
</li>
)
})
}
</ul>
</div>
)
}
}
custom.js
$(function (){
console.log("loaded content");
$('.images-bg').each(function(){
$(this).css({
'background-image': 'url(' +$('img', this).hide().attr('src') +')',
'height': $(window).height()
});
});
/*---------- BIG SLIDER ----------*/
$('.portfolio-with-details .flexslider, .service .flexslider').flexslider({slideshowSpeed: 5000});
$('.portfolio-image.flexslider').flexslider({slideshow: false});
$('.flexslider.home-page').flexslider({
slideshowSpeed: 5000,
after : function(slider){
var next = $('.flex-active-slide', slider).find('.home-title');
var className = '';
if(next.hasClass('left')){
className = 'bounceInLeft';
}else if(next.hasClass('top')){
className = 'flipInX';
}else if(next.hasClass('zoom')){
className = 'bounceIn';
}
next.addClass(className + ' animated');
next.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
next.removeClass(className + ' animated');
});
}
});
/*---------- //BIG SLIDER ----------*/
})
Below screenshot is what i am getting now. I want opposite. I expected custom.js console.log message to print after Main.js console.log
