Right now, {post.htmlBody} will display on the individual post page, but not in in the Posts List view. The first code block is my CustomPostsItem.jsx. You'll see underneath the h3 tags I'm trying to display the {post.htmlBody} as defined at the top. This does not populate when CustomPostsItem.jsx is called within the second code block, which is PostsList.jsx. It does populate and display properly when CustomPostsItem.jsx is called within the third code block, which is PostsPage.jsx. Meaning it doesn't display on my home page, but will display on the individual post page, even though the same CustomPostsItem.jsx is being called both times. I've also tried with just {post.body} instead of the htmlBody stuff, but the same thing happens.
import React, { PropTypes, Component } from 'react';
class CustomPostsItem extends Telescope.components.PostsItem {
render() {
({UsersAvatar, UsersName, Vote, PostsStats, PostsThumbnail} = Telescope.components);
const post = this.props.post;
const htmlBody = {__html: post.htmlBody};
let postClass = "posts-item";
if (post.sticky) postClass += " post-sticky";
// ⭐ custom code starts here ⭐
if (post.color) {
postClass += " post-"+post.color;
}
// ⭐ custom code ends here ⭐
return (
<div className={postClass}>
<div className="posts-item-vote">
<Vote post={post} currentUser={this.props.currentUser}/>
</div>
{/*post.thumbnailUrl ? <PostsThumbnail post={post}/> : null*/}
<div className="posts-item-content">
<h3 className="posts-item-title">
<a className="posts-item-title-link" href={Posts.getLink(post)} target={Posts.getLinkTarget(post)}>{post.title}</a>
{this.renderCategories()}
</h3>
<div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div>
</div>
</div>
)
}
};
export default CustomPostsItem;
import React from 'react';
const PostsList = ({results, currentUser, hasMore, ready, count, totalCount, loadMore, showHeader = true}) => {
// console.log(results);
// console.log(ready);
// console.log(hasMore);
// console.log(totalCount);
// console.log(count);
if (!!results.length) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
{results.map(post => <Telescope.components.PostsItem post={post} currentUser={currentUser} key={post._id}/>)}
</div>
{hasMore ? (ready ? <Telescope.components.PostsLoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Telescope.components.PostsLoading/>) : <Telescope.components.PostsNoMore/>}
</div>
)
} else if (!ready) {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsLoading/>
</div>
</div>
)
} else {
return (
<div className="posts-list">
{showHeader ? <Telescope.components.PostsListHeader /> : null}
<div className="posts-list-content">
<Telescope.components.PostsNoResults/>
</div>
</div>
)
}
};
PostsList.displayName = "PostsList";
module.exports = PostsList;
import React from 'react';
const PostsPage = ({document, currentUser}) => {
const post = document;
const htmlBody = {__html: post.htmlBody};
return (
<div className="posts-page">
<Telescope.components.HeadTags url={Posts.getLink(post)} title={post.title} image={post.thumbnailUrl} />
<Telescope.components.PostsItem post={post}/>
<div className="posts-page-body" dangerouslySetInnerHTML={htmlBody}></div>
{/*<SocialShare url={ Posts.getLink(post) } title={ post.title }/>*/}
<Telescope.components.PostsCommentsThread document={post} currentUser={currentUser}/>
</div>
)
};
PostsPage.displayName = "PostsPage";
module.exports = PostsPage;
export default PostsPage;