Сделать виджет комментариев на react js

[melnikov24]

Напишите виджет комментариев на React со следующей функциональностью:

1. Отображение списка комментариев: автор, текст, дата и время

2. Добавление нового комментария (поля для ввода: имя автора, текст)

3. Удаление комментария (кнопка удаления рядом с каждым комментарием)

4. Сохранение состояния приложения в localStorage в формате JSON (при перезагрузке страницы все добавленные комментарии должны подтягиваться оттуда)

[Nexus]

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

[SuperZen]

$ create-react-app comments_react
$ cd comments_react
$ yarn add date-fns

App.js

import React, { Component } from 'react'
import './App.css'
import { format } from 'date-fns'
class App extends Component {

  state = {
    comments: [],
    form: {
      name: '',
      comment: ''
    }
  }

  componentDidMount() {
    if (localStorage.getItem('state')) {
      this.setState({ ...JSON.parse(localStorage.getItem('state')) })
    }
  }

  addComment = () => {
    this.setState({
      comments: [
        ...this.state.comments,
        {
          id: this.state.comments.length ? this.state.comments.reduce((p, c) => p.id > c.id ? p : c).id + 1 : 1, // max id +1
          name: this.state.form.name,
          comment: this.state.form.comment,
          date: new Date()
        }
      ],
      form: {
        name: '',
        comment: ''
      }
    }, () => localStorage.setItem('state', JSON.stringify(this.state)))
  }

  removeComment = (id) => {
    this.setState({
      comments: this.state.comments.filter(comment => comment.id !== id)
    }, () => localStorage.setItem('state', JSON.stringify(this.state)))
  }

  handleChange = (e) => {
    console.log(e.target.name)
    this.setState({
      form: {
        ...this.state.form,
        [e.target.name]: e.target.value,
      }
    })
  }

  render() {
    return (
      <div className="App">
        {this.state.comments.map(comment => <div key={comment.id}>
          <span style={{ fontStyle: 'italic' }}>{comment.id} - {format(comment.date, 'DD/MM/YYYY')}: </span>
          <strong>{comment.name}, </strong>
          <span>{comment.comment}</span>
          <button onClick={this.removeComment.bind(null, comment.id)}>Удалить комментарий</button>
        </div>)}
        <div>
          <label>Имя: <input
            type="text"
            value={this.state.form.name}
            name="name"
            onChange={this.handleChange} /></label>
          <label>Комментарий: <textarea
            name="comment"
            value={this.state.form.comment}
            onChange={this.handleChange}></textarea>
          </label>
          <button onClick={this.addComment}>Добавить комментарий</button>
        </div>
      </div>
    )
  }
}

export default App

$ yarn start