Как сделать раскрывающуюся при клике статью на React?

Question

[Shiva6]

Приветствую всех, кто решил откликнуться!
Делаю приложение-блог. Есть список превью статей, структура превью:
-заголовок
-краткое описание
-счетчик комментариев на статье

Необходимо сделать так, чтобы при клике на превью открывалась полная статья со структурой:
-заголовок
-текст статьи
-блок с возможностью добавлять комментарии

Это как то возможно сделать с помощью роутинга, но я пока что не разобрался.
Буду признателен если напишете где можно посмотреть пример или кусочек кода, а если и то и другое, то совсем будет здорово! Заранее спасибо.

Код списка с превью статей выглядит так

const ArticlesList = ({articles}) => {
  return (
    <ul>
      {
        articles.map((articles) => {
          return (
            <li key={articles.id} > <ArticlesListPrevItem articles={articles}/> </li>
          )
        })
      }
    </ul>
  );
}

class ArticlesListContainer extends Component {

  render() {
    const { articles } = this.props;
    console.log({ articles });
    return (
      <ArticlesList articles={articles}/>
    );
  }
}
// Описание данных которые нужны из state
const mapStateToProps = ({ articles }) => {
  return { articles };
};

export default connect(mapStateToProps)(ArticlesListContainer);

Код превью статьи выглядит так

const ArticlesListPrevItem = ({ articles }) =>{
  const { title, summary, comments } = articles;
  return (
    <div className="articles-list__prev-item" >
      <h2>{title}</h2>
      <p>{summary}</p>
      <span>Коментарии: {comments.length}</span>
      <button>Delete</button>
    </div>
  );
};

export default ArticlesListPrevItem;

Данные в state хранятся в таком виде:

{
    articles: [
    {
    id: 1,
    title: 'AAAA',
    summary: 'minimalAAA',
    text: 'dsffsfsegrsgsrgsrs',
    comments: [
      {
        name: 'Den',
        comment: 'Hnefei nfien'
      },
      {
        name: 'Ben',
        comment: 'Lihnioekn ienf'
      }
    ]
  }
}

Comments

[lloydbanks]

где можно посмотреть пример или кусочек кода, а если и то и другое, то совсем будет здорово

у меня в гитхабе завалялся как раз такой пример с раскрывающими статьями

[Shiva6]

lloydbanks, снова выручаете. Думаю смогу разобраться, еще раз спасибо!

Answer 1

[grinat]

https://reacttraining.com/react-router/web/example...