Trying to add strings from a Form into an array on submit but I'm left with an array of empty strings instead. Using Functional Components

user_18943330 0
Viewed 51

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!

console.log(value)

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 class="entryForm"  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>
    )
    
}
reactjs javascript
1 Answers

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 = ""; // clear the input after submit
    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.

user_152886410
Related