score:3

Accepted answer
import React, { useState } from "react";
const OrderItems = () => {
 const [commentText,setCommentText] = useState("")

 const handleSubmit = (evt) => {
        evt.preventDefault();
        console.log(commentText);
    }
 return (
 <>
 <form  id="myForm" onSubmit={handleSubmit} >
   <div>
       <label
           htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information</label>
                 <textarea 
                     name = "commentTextArea"
                     type="text"
                     id="CommentsOrAdditionalInformation"
                     value = {commentText}
                     onChange={e => setCommentText(e.target.value)}
                      >
               </textarea>
              <input type = "submit" value="Submit" className="btn_submit" alt = "submit Checkout"/>
        </div>
</form>


    
</>
)
}

score:1

import React, { useState } from "react";

const OrderItems = () => {

  // Always initialise state inside the component
  const [commentText,setCommentText] = useState("")

  const handleOnSubmit = event => {
    event.preventDefault();
    console.log(commentText);
  }

  return (

    // onSubmit should just be a reference to handleOnSubmit
    <form  id="myForm" onSubmit={handleOnSubmit} >
      <div>
        <label
          htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information
        </label>

        // You can self-close the textarea tag
        <textarea 
          name="commentTextArea"
          type="text"
          id="CommentsOrAdditionalInformation"
          value={commentText}
          onChange={e => setCommentText(e.target.value)}
        /> 
      </div>

      // Put the button inside the form
      <button type = "submit" form ="myForm" className="btn_submit" alt="submit Checkout">
        <a href ="/cart/preview"/>
        <img src = ""/>
      </button>
    </form>
  );
}

Related Query

More Query from same tag