Trying to add strings from a Form into an array on submit but I'm left with an array of empty s-CodePudding

Using functional components, I need to fill an array with string Form data onSubmit. handleSubmit is supposed to store the string data but when I use console.log(value) it returns an empty array.

I can't figure out how to access the user input from the Form so that it can be stored into an array. I thought that setValue([value]) would be a method to accomplish this but clearly something is not right with my code.

read2List is supposed take the data from value and store it into an array when the submit button is clicked. I appreciate any ideas! Thank you for your time!

function App () { 
     const [value, setValue] = useState("");
     const [entrylist, setEntry] = useState([]);
        
        const handleSubmit = (event) => {
            event.preventDefault();
            setValue([value])
            console.log(value) 
        }   
        const read2List = () => {
            const updatedList = [...entrylist];
            updatedList.push(value);
            setEntry(updatedList);
           console.log(updatedList);
        } 

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

        <form   onSubmit={handleSubmit}  >
            <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" onClick={read2List}>Submit</button>
       
        </form>
        </div>
    )
    
}

CodePudding user response：

You can do it as below. I simplified your code. I removed read2List function, as you can do what you want with one function. I added comments in the code. Here is a working CodeSandbox as well.

import { useRef, useState } from "react";

export default function App() {
  const textAreaRef = useRef();
  const [entrylist, setEntry] = useState([]);
  console.log(entrylist); // I added the console log here, to see changes

  const handleSubmit = (event) => {
    event.preventDefault();
    const updatedList = [...entrylist];
    updatedList.push(textAreaRef.current.value);
    textAreaRef.current.value = "";
    setEntry(updatedList);
  };

  return (
    <div>
      <div> Insert Entry </div>
      <form className="entryForm" onSubmit={handleSubmit}>
        <label htmlFor="newEntryId">
          <span>New Entry:</span>
          <textarea
            type="text"
            id="newEntryId"
            name="newEntryName"
            rows="30"
            cols="75"
            defaultValue="What's on your mind?"
            ref={textAreaRef}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

To know more about handling inputs in React, visit this page from the official documentation.