Simple React Chat UI snippets

App.js

...

  processData(data) {
    const conversations = data.map(item => ({
      ...item,
      date: parseDate(item.date),
      selected: false,
    }));
    this.setState({ conversations });
  }

  select(id) {
    const { conversations, selecting } = this.state;
    if (selecting) {
      this.setState({
        conversations: conversations.map(item => ({
          ...item,
          selected: item.id === id ? !item.selected : item.selected,
        }))
      })
    }
  }

  removeSelected() {
    const { conversations } = this.state;
    this.setState({
      selecting: false,
      conversations: conversations.map(item => ({
        ...item,
        selected: false,
      }))
    })
  }

  deleteChat() {
    const { conversations } = this.state;
    const id = conversations.reduce((acc, cur) => {
      if (cur.selected) {
        acc.push(cur.id);
      }
      return acc;
    }, []);

    // call deleting endpoint using id
    console.log({ id });
    this.deleteSelected();
  }

  deleteSelected() {
    const { conversations } = this.state;
    this.setState({
      selecting: false,
      conversations: conversations.filter(item => !item.selected),
    });
  }

...