Supriya : Week2 Assignment#10
Conversation
|
|
||
| export default class AuthorBio extends React.Component{ | ||
| render(){ | ||
| const isMediumMember= this.props.isMediumMember; |
There was a problem hiding this comment.
| const isMediumMember= this.props.isMediumMember; | |
| const { isMediumMember } = this.props; |
|
|
||
| return( | ||
|
|
||
| <div className = "author_details"> |
There was a problem hiding this comment.
| <div className = "author_details"> | |
| <div className = "author-details"> |
Typically html class names are dash-separated
|
|
||
| <div className = "author_details"> | ||
| {isMediumMember? (<img src={this.props.image} alt=" " className= "author_image2" />) | ||
| :(<img src={this.props.image} alt=" " className= "author_image1" />)} |
There was a problem hiding this comment.
Could this just be something like?
<img src={this.props.image} alt=" " className= "{isMediumMember ? 'author_image1' : 'author_image2' }" />
| handleBookmark = (e) =>{ | ||
| e.preventDefault(); | ||
|
|
||
| if(!this.state.isBookmarked){ |
There was a problem hiding this comment.
Nice! typically you'd just want this logic to be in your render function. Don't mess with traversing the document and adding classes, etc.
There was a problem hiding this comment.
Sorry I did not quite understand. If i include this inside render function, how should it work without the classes?
There was a problem hiding this comment.
I added a comment to your code below. Basically you want your render function to handle all the DOM manipulation.
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state= { |
There was a problem hiding this comment.
You wouldn't typically keep static data like this JSON in state.
| render(){ | ||
| return( | ||
| <div> | ||
| {this.renderForYouSection()} |
There was a problem hiding this comment.
I would just put the components here:
<ForYouSection forYouSection={this.state.forYouSection} />
| <div className= "additional_details"> | ||
| <div className = "content_bottom"> | ||
| <AuthorBio image={this.props.card.author.image} authorName ={this.props.card.author.name} isMediumMember= {isMediumMember} /> | ||
| <i className="material-icons" id={this.props.id+"-bookmark"} onClick={this.handleBookmark}>bookmark_border</i> |
There was a problem hiding this comment.
| <i className="material-icons" id={this.props.id+"-bookmark"} onClick={this.handleBookmark}>bookmark_border</i> | |
| <i className="material-icons { this.state.isBookmarked ? : 'bookmark' : '' } " id={this.props.id+"-bookmark"} onClick={this.handleBookmark}>{ this.state.isBookmarked ? : 'bookmark' : 'bookmark_border' }</i> |
2 participants
Week 2 HW Submission
Please fill out the information below in order to complete your assignment. Feel free to update this comment later if necessary.