CODEWITHSUNDEEP
javascriptreactjs
CreativeDesign
CreativeDesign

Reputation: 101

How to preserve spacing when storing a string into an array? JavaScript React.js

I have a form with a <textarea>. On submit that string gets stored into an array. Sometimes the strings have blank lines or additional spacing and I want to preserve this spacing. Right now, the only spacing preserved is the spacing between words. The handleSubmit component consist of a useRef hook that is pushed into the array. I'm looking for another approach for storing the string that would preserve spacing. I appreciate all ideas! Thank you for your time!

 const textAreaRef = useRef();   
 const [entryArray, setEntry] = useState([]);

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

return (
        <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?" ref = {textAreaRef} 
                /> 
            </label>
            <button type="submit">Submit</button>
       
        </form>
        </div>
    )

Upvotes: 0

Views: 317

Answers (1)

Konrad
Konrad

Reputation: 24661

Can't replicate the issue, works fine.

Vanilla js example, but works the same in React

const area = document.querySelector('textarea')
const button = document.querySelector('button')
const saved = []

button.addEventListener('click', () => {
  saved.push(area.value)
  area.value = ''
  console.log(saved)
})
<textarea></textarea>
<button>save</button>

Upvotes: 1

Related Questions