New Item for React

ListTweets.jsx

import React from 'react';
// ...BackendService, classnames
import NewTweet from './NewTweet';

class ListTweets extends React.Component {
  // ...constructor, componentDidMount, getTweets

  onAdd(tweet) {
    this.backendService.addTweet(tweet)
      .then((data) => {
        if (data && data.createTweet) {
          let tweets = Object.assign([], this.state.tweets);
          tweets.unshift(data.createTweet);
          this.setState({ tweets: tweets });
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <ul className="list-unstyled">
        <li className="media">
          <div className="media-body">
            <NewTweet onSubmit={this.onAdd} placeholder="Add your text..." />
          </div>
        </li>
        {/* ...List items */}
      </ul>
    )
  }
}

export default ListTweets;

NewTweet.jsx

import React from 'react';
import classnames from 'classnames';

class NewTweet extends React.Component {
  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      tweet: Object.assign({}, this.state.tweet, {
        [name]: value
      })
    });
  }
  
  handleSubmit() {
    this.props.onSubmit(this.state.tweet);
  }
  
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <input
            className"form-control"
            type="text"
            name="content"
            value={this.state.tweet.content}
            onChange={this.handleInputChange}
            placeholder={this.props.placeholder}>
          </input>
        </div>
        <button
          type="submit"
          className={classnames("btn","btn-primary")}>
          Submit
        </button>
      </form>
    )
  }
}

export default NewTweet;