Home > Blockchain >  how to disabled post button when textarea contain only blank white spacing or empty in reactJs
how to disabled post button when textarea contain only blank white spacing or empty in reactJs

Time:08-12

//disabled post button when textarea contain only blank white spacing or empty in reactJs

import { useState } from "react";

const CommentForm = ({ handleSubmit, submitLabel }) => {
  const [text, setText] = useState("");
  const textType = "plainText"
  const textDisabled = text.length === 0
  const onSubmit = (event) => {
    event.preventDefault();
    handleSubmit(text,null,textType);
    setText("")
  };

  return (
    <form onSubmit={onSubmit}>
      <textarea
        className="comment-form-textarea"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button className="comment-form-button" disabled={textDisabled} >{submitLabel}</button>
    </form>

  );
};

export default CommentForm;

CodePudding user response:

const textDisabled = text.length === 0 || text.trim().length === 0

CodePudding user response:

In the given condition it checks the string has any charector, you can use just text (empty string is false value) or to exclude space text.trim().

Button disabled can be written as (not-text.trim() which gives true when there is no charectors nor an empty space)

<button className="comment-form-button" disabled={!text.trim()} >{submitLabel}</button>

  • Related