function App() {
  return <div>Hello React!</div>;
}

const target = document.querySelector('#app');
ReactDOM.render(<App/>, target);

function Tweet(props) {
  return <div>{props.content}</div>;
}

const [value, setValue] = React.useState('デフォルト値');
setValue('新しい値！');

function TweetInput(props) {
  // 要素にアクセスするための参照を取得
  // ref.currentのデフォルト値はnullにしておく
  // 参照したい要素にJSXの方でこのrefをセットする
  const textareaRef = React.useRef(null);

  // Tweetボタンクリック時のコールバック関数を作って保存
  // textareaRef.currentかprops.addTweetが更新されたら
  // コールバック関数を作り直し
  const sendTweet = React.useCallback(() => {
    // refのcurrentに入っている値がDOM
    // 初期値はnull（上で指定した）で、
    // 実際にHTML側に描画されると値が入ります
    if(textareaRef.current) {
      props.addTweet({
        id: new Date().getTime(), // IDはユニークな値にする
        icon: '☠️', // このあたりの値は好きにしてください
        displayName: 'ミスター死',
        accountName: 'mrdeath',
        content: textareaRef.current.value
      });
    }
  }, [textareaRef.current, props.addTweet]);

  return (
    <div>
      <div><textarea className="tweet-textarea" ref={textareaRef}></textarea></div>
      <div><button onClick={sendTweet} className="send-tweet">Tweet</button></div>
    </div>
  );
}

function Tweet(props) {
  // Reactからこのコンポーネントの
  // like値と、likeの値をセットするための関数を取り出す
  // デフォルト値はfalseにする
  const [liked, setLike] = React.useState(false);
  const toggleLike = React.useCallback(() => setLike((prev) => !prev), [setLike]);
  // おまけ！！リツイート機能を付けてみた
  const [retweeted, setRetweet] = React.useState(false);
  const toggleRetweet = React.useCallback(() => setRetweet((prev) => !prev), [setRetweet]);


  return (
    <div className="tweet">
      <div className="icon-container">{props.icon}</div>
      <div className="body-container">
        <div className="status-display">
          <span className="display-name">{props.displayName}</span>
          <span className="account-name">@{props.accountName}</span>
        </div>
        <div className="content">{props.content}</div>
        <div className="status-action">
          <span onClick={toggleLike}>{liked ? '❤️' : '♡'}</span>
        </div>
        <div className="status-action">
          <span onClick={toggleRetweet}>{retweeted ? '●️' : '○'}</span>
        </div>
      </div>
    </div>
  );
}