artwork depicting stylized React logo
artwork depicting stylized React logo
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

React lessons can be viewed here: https://soshace.com/category/javascript/react/react-lessons/

Schedule a Free Discovery Call & Explore Tailored Solutions for Your Business

Remote software development team

Upwork

5/5

5.0 star review

Top fintech developers

G2

4.9/5

4.9 star review

Tech talent acquisition

Clutch

4.9/5

4.9 star review

Blockchain application development company

Glassdoor

4.5/5

4.5 star review