CODEWITHSUNDEEP
reactjsreact-hook-form
Nefelibata
Nefelibata

Reputation: 99

How to get textarea data with useState()

I have read page after page and I am not sure what I am doing wrong. My useState works with my other inputs. I am unable to get it to work with my textarea.

Also, what would be the best way to use my data in another component?

import React, { useState } from "react";

const OrderItems = () => {
const [commentText,setCommentText] = useState("")

const onSubmit = (data) => {
        console.log(data.commentText);
    }
return (
<>
<form  id="myForm" onSubmit={handleSubmit(onSubmit)} >
   <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>
        </div>
</form>

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

Upvotes: 2

Views: 9660

Answers (2)

Andr&#233; Krosby
Andr&#233; Krosby

Reputation: 1146

Some things to keep in mind:

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>
  );
}

Upvotes: 3

NeERAJ TK
NeERAJ TK

Reputation: 2695

You are initializing state outside the function, Please do it like this: Also, You are logging the wrong state inside onSubmit.

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>


    
</>
)
}

To use the data in another component: If it is a child component pass it as props. Else use state management tools like context or redux.

Also, for routing, I would recommend using React Router. Refer here.

Upvotes: 4

Related Questions