React Lesson 2: Homework Assignment

01Nov

Ilia DzhiubanskiyJavaScript, React, React Lessons

Hopefully, all’s going well!

Let’s check our home task. The main reason of using React lies in the ability to create components based on your functionality set, i.e. to divide the whole app into small independent parts. In our case, we need to make comments our independent component. It will also be great to practice the skill of creating as many stateless components as possible. One of the examples in this scenario is the comment.js file.

import React from 'react'  
import PropTypes from 'prop-types';
  
function Comment(props) {  
    const { comment: { text, user } } = props  
    return (  
        <div>  
            <p>{text}</p>  
            <b>by {user}</b>  
        </div>  
    )  
}  
  
export default Comment

CommentList.js

import React, { Component } from 'react'  
import PropTypes from 'prop-types';
import Comment from './Comment'  
  
class CommentList extends Component {  
    state = {  
        isOpen: false  
    }  
  
    render() {  
        const { comments } = this.props  
        if (!comments || !comments.length) return <h3>no comments yet</h3>  
        const { isOpen } = this.state  
        const commentItems = comments.map(comment => <li key = {comment.id}><Comment comment = {comment}/></li>)  
        const body = isOpen ? <ul>{commentItems}</ul> : null  
        const linkText = isOpen ? 'close comments' : 'show comments'  
        return (  
            <div>  
                <a href="#" onClick = {this.toggleOpen}>{linkText}</a>  
                {body}  
            </div>  
        )  
    }  
  
    toggleOpen = (ev) => {  
        ev.preventDefault()  
        this.setState({  
            isOpen: !this.state.isOpen  
        })  
    }  
}  
  
export default CommentList

Our file named Articles.js will change in the following way:

import React, { Component } from 'react'  
import CommentList from './CommentList' //added
    
  class Article extends Component {  
      state = {  
  
      render() {  
//    const article = this.props.article  //deleted
//    const { article } = this.props  //deleted
//    const { article: { title, text } } = props  //deleted
 	const { article: { title, text, comments } } = this.props //added  
          const { isOpen } = this.state  
//   	const body = isOpen ? <section>{ article.text }</section> : null  //deleted
     	const body = isOpen ? <section>{ text } <CommentList comments = {comments} /></section> : null  //added
    
          return (  
              <div>  
             	{/*<h1 onClick = {this.toggleOpen}>{ article.title }</h1>  //deleted */}
             	<h1 onClick = {this.toggleOpen}>{ title }</h1>  //added
                  {body}  
              </div>  
          )

This is how our home task coding will look like. You can download the file with the updated project from our repository or just copy it. Our next assignments will continue in this file.

a mockup web page of our blog at blog.soshace.com