gistfile1.txt

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentMessage: '',
      messages: [],
    };
  }
  
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to Facebird</h2>
        </div>
        <textarea
          onChange={(event) => this.setState({currentMessage: event.target.value})}
          value={this.state.currentMessage}
        />
        <span
          style={{
            color: this.state.currentMessage.length > 140 ? 'red' : 'green'
          }}>
          {140 - this.state.currentMessage.length}
        </span>
        <button
          onClick={() => 
            this.setState({
              messages: [this.state.currentMessage, ...this.state.messages],
              currentMessage: '',
            })
          }
          disabled={this.state.currentMessage.length === 0 || this.state.currentMessage.length > 140}>
          Submit
        </button>
        {
          this.state.messages.map((message, idx) => 
            <Post key={this.state.messages.length - idx} body={message} />
          )
        }
      </div>
    );
  }
}

class Post extends Component {
  render() {
    return (
      <p>{this.props.body} <LikeButton/></p>
    );
  }
}

class LikeButton extends Component {
  constructor(props) {
    super(props);
    this.state = {liked: false};
  }
  
  render() {
    return (
      <a href="#" onClick={() => this.setState({liked: !this.state.liked})}>
        {this.state.liked ? 'unlike' : 'like'}
      </a>
    );
  }
}

export default App;