AddAnnouncementForm.jsx

import React, { useState } from "react";

import { addAnnouncement } from "actions/announcements";
import Button from "components/Button";

const AddAnnouncementForm = ({ className }) => {
  const [text, setText] = useState("");

  const onTextInput = (evt) => {
    setText(evt.target.value);
  };

  const onAdd = (evt) => {
    if (!!text) {
      addAnnouncement.run({ content: text });
    }
  };

  return (
    <div className={className}>
      <div className="form-field">
        <div className="form-field__wrapper form-field__wrapper--shadowed">
          <textarea
            className="text-input form-field__control "
            value={text}
            rows="3"
            cols="40"
            placeholder="Vyplňte text oznámení"
            onChange={onTextInput}
          ></textarea>
        </div>
      </div>

      <Button
        onClick={onAdd}
        className="btn--black text-sm mt-2"
        hoverActive
        disabled={!text}
      >
        Přidat oznámení
      </Button>
    </div>
  );
};

export default AddAnnouncementForm;