How to pass AJAX data to the grandchild component - ReactJs - ajax

Question

How can I pass AJAX data from grandparent to grandchild component. It works for grandparent and parent components but for parent and grandchild doesn't in this case
// GrandParent
<main className="main">
<h1 className="main__heading">Images from Unsplash API</h1>
<section className="main__section">
{this.state.posts.map(post => {
return (
<Section imgSrc={post.urls.regular} key={post.id} />
)
})}
</section>
</main>
//Parent
<section className="card-section">
<img className="card-section__img" src={this.props.imgSrc} alt="Lorem Ipsum" />
<Author
authorSrc={post.user.profile_image.small}
authorAlt={post.user.name}
authorName={post.user.name}
/>
</section>
//GrandChild
<div className="author-info">
<img className="author-info__img" src={this.props.authorSrc} alt={this.props.authorAlt} />
<h3 className="author-info__heading">{this.props.authorName}</h3>
</div>

Answer 1

I suppose you need to pass the post data from grandParent to parent and then only forward it to grandChild like
// GrandParent
<main className="main">
<h1 className="main__heading">Images from Unsplash API</h1>
<section className="main__section">
{this.state.posts.map(post => {
return (
<Section post={post} imgSrc={post.urls.regular} key={post.id} />
)
})}
</section>
</main>
//Parent
<section className="card-section">
<img className="card-section__img" src={this.props.imgSrc} alt="Lorem Ipsum" />
<Author
authorSrc={this.props.post.user.profile_image.small}
authorAlt={this.props.post.user.name}
authorName={this.props.post.user.name}
/>
</section>
//GrandChild
<div className="author-info">
<img className="author-info__img" src={this.props.authorSrc} alt={this.props.authorAlt} />
<h3 className="author-info__heading">{this.props.authorName}</h3>
</div>