Async message sending and status updating

App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

const apiSendMessage = message =>
  new Promise((resolve, reject) => {
    const randomDelay = Math.floor(Math.random() * 3000);

    setTimeout(() => {
      const isSuccessful = Math.floor(Math.random() * 10) % 2 == 0;
      isSuccessful ? resolve(message) : reject(message);
    }, randomDelay);
  });

const Message = ({ message }) => (
  <p>
    {message.text} ({message.status})
  </p>
);

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
      messages: [{ text: "First message", status: "sent" }]
    };
  }

  updateMessageStatus(message, status) {
    this.setState(prevState => ({
      ...prevState,
      messages: prevState.messages.map(m => {
        if (m === message) {
          return { ...m, status };
        } else {
          return m;
        }
      })
    }));
  }

  sendMessage(event) {
    const { value } = this.state;
    const newMessage = { text: value, status: "pending" };

    this.setState(
      prevState => ({
        ...prevState,
        value: "",
        messages: prevState.messages.concat([newMessage])
      }),
      () =>
        apiSendMessage(value)
          .then(message => this.updateMessageStatus(newMessage, "sent"))
          .catch(message => this.updateMessageStatus(newMessage, "failed"))
    );

    event.preventDefault();
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div className="App">
        {this.state.messages.map((m, idx) => (
          <Message key={idx} message={m} />
        ))}

        <form onSubmit={e => this.sendMessage(e)}>
          <label>
            Message:
            <input
              type="text"
              value={this.state.value}
              onChange={e => this.handleChange(e)}
            />
          </label>
          <input type="submit" value="Send" />
        </form>
      </div>
    );
  }
}

export default App;