I'm trying to have the data from the textarea in the form be stored into an array once the user hits the submit button. I'm working with only functional components. Do I need to use preventDefault() to stop the page from refreshing in order for the data to be transferred into an array? I need the form to still clear after the user hits submit so if I use preventDefault() I will likely need to create a new component to reset the textarea.

I appreciate any ideas! Thank you for your time!

 function App () { 
         const [value, setValue] = useState("");
         const [entrylist, setEntry] = useState([]);
         
         
            
            const handleChange = () => {
            setValue([value])
            console.log(value)
        } 
    
            const readNWrite = () => {
                setEntry([entrylist])
                entrylist.push(value)
    
            } 
    
        return (
            <div>
            <div> Insert Entry  </div> 
    
            <form     >
                <label for="newEntryId"> 
                <span>New Entry:</span>
                <textarea  type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue = {"What's on your mind?"}  onChange={(e)=> { 
                handleChange(e.target.value);
                }} />
                </label>
                <button onClick={readNWrite}>Submit</button>
           
            </form>
            </div>
        )
        
    }

CodePudding user response：

You'll need to handle the onSubmit event on the form. And like you suspected, you'll need to call event.preventDefault() to prevent the form from reloading the page.

Extract the values from the form with the FormData constructor. Then loop over the formdata and add each entry to a new array.

Update the state with the new entries.

function App() {
  const [entries, setEntries] = useState([]);

  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    const newEntries = [];
    for (const [name, value] of formData) {
      formValues.push({
        name,
        value
      });
    }

    setEntries(newEntries);
  };

  /**
   * This is here to log the changed entrylist state.
   */
  useEffect(() => {
    console.log(entries);
  }, [entries]);

  return (
    <div>
      <div>Insert Entry</div> 
      <form 
        
        onSubmit={handleSubmit}
      >
        <label for="newEntryId"> 
          <span>New Entry:</span>
          <textarea 
            id="newEntryId" 
            name="newEntryName" 
            rows="30" 
            cols="75" 
            defaultValue={"What's on your mind?"}
          />
        </label>

        <button
          type="submit"
          onClick={readNWrite}
        >Submit</button>
      </form>
    </div>
  );
}

CodePudding user response：

1. You do need e.preventDefault() to prevent form's default action from happening, and that should be added to your readNWrite event handler.

2. You don't need to create a new component to reset your textarea, because from what I can see from your code, you are storing the text into [entrylist]. While the change in textarea is handled by handleChange, where e.target.value is passed in, what you can do is after push the current text to the array, you can set the value to an empty string like this,

            const handleChange = (e) => {
                setValue(e.target.value);
                console.log(value);
            } 
    
            const readNWrite = () => {
                setEntry([entrylist]);
                entrylist.push(value);
                setValue("");
            } 

CodePudding user response：

Looks like you're trying to modify entrylist directly which isn't something you can do. Instead create a new array and push your value onto that, then set the value of entryList using this new value.

const readNWrite = () => {
   const updatedList = [...entrylist];
   updatedList.push(value);

   setEntry(updatedList);
} 

CodePudding user response：

I don't think you require a controlled component (textarea) over here as what you are doing is essentially resetting the data present inside it on submit. Therefore, there is no harm in using an uncontrolled component, thats why, value useState hook and handleChange in your textarea is not required.

I don't understand exact what you are trying to do with readNWrite, I suppose you want to put your text data as an array element in that. In that case you are not doing it the right way.

Yeah, you need to call preventDefault to stop the refresh and clear the textarea yourself.

you need to call the readNWrite function in onSubmit for the form, no need to put it in the button and change the button type as submit.

export default function App() {
  const [entrylist, setEntry] = useState([]);

  const readNWrite = event => {
    setEntry([...entrylist, event.target[0].value]);
    event.target[0].value="";
    event.preventDefault();
  };

  return (
    <div>
      <div> Insert Entry </div>

      <form  onSubmit={readNWrite}>
        <label for="newEntryId">
          <span>New Entry:</span>
          <textarea
            type="text"
            id="newEntryId"
            name="newEntryName"
            rows="30"
            cols="75"
            defaultValue={"What's on your mind?"}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}