re: Simpler React component design with the Chain of Responsibility pattern VIEW POST

FULL DISCUSSION
 

Sounds like a very complicated way to achieve something very simple.
I'd suggest you move away from the oop/class approach and try a more functional approach.

 

Hi guico33,

Thanks for taking the time to read the post, and also thanks for the feedback! Considering the above example, what would be the correct functional way to approach that (investor data table cell logic) problem? I really would like to know, and next time utilize it!

Cheers,
Xavios

 

Not that much to be done given the first code snippet is already very straightforward.
You may create a stateless Article component that will take care of rendering one article.
Instead of classes you can use function components (with hooks to manage state and side effects).
You could encapsulate the fetch logic into a custom hook but that's already overthinking it imo.

 
import React from "react";

class ArticleList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { articles: [] };
  }

  async componentDidMount() {
    const result = await fetch("http://sample.com/");
    const articles = await result.json();
    this.setState({ articles: articles });
  }

  renderArticle = article => {
    if (!article.visible) return <React.Fragment />;

    if (article.loading) return <div className="article skeleton" />;

    return <div className="article">{article.title}</div>;
  };

  render() {
    return this.state.articles.map(renderArticle);
  }
}

export default ArticleList;
code of conduct - report abuse