Arrays, Events, and the Little Details That Make React Feel Real

Today felt like one of those sessions where you keep pulling a thread and more things keep unravelling. A mix of JavaScript utility tricks, how browser events actually work under the hood, and some solid React form habits. Good day.

---

Array.from — Creating Arrays Out of Thin Air
Sometimes you don't have data to map over — you just need to generate a list of numbers. Array.from is perfect for this:
Array.from({length: 10}, (_, i) => i + 1)
This creates [1, 2, 3, ... 10] from nothing. The _ is just the value parameter we don't care about — i is the index, and we add 1 so it starts from 1 instead of 0. Clean and no loops needed.
And since it returns a plain array, you can chain .map() right onto it:
Array.from({length: 10}, (_, i) => i + 1).map((index) => <Component key={index} />)
One line, generates your array and renders your components. Very satisfying once it clicks.

---

WSL + Docker Desktop Issues — You're Not Alone
If you've hit weird issues with WSL and Docker Desktop not playing nice together — completely normal. Almost every Windows developer goes through this at some point. It's a known conflict and there are fixes out there. Don't let it block you for too long.

---

e.preventDefault() — Stopping the Browser From Doing Its Thing
By default, submitting a form reloads the page. That's just what browsers do. e.preventDefault() steps in and says "actually, don't do that":
function handleSubmit(e) {
e.preventDefault();
// now handle it your way
}
You'll write this in practically every form you ever build in React.

---

The Event Object — Everything the Browser Knows About What Just Happened
Here's a fun trick — paste this in your browser console and click a button:
document.querySelector('button').addEventListener('click', (e) => { console.log(e) })
What you get back is the event object — and it's packed with information. Every time something happens in the browser, it bundles up details like:

---

What happened — type: "click"
Where it happened — target:
When it happened — timeStamp: 12345
Which key was pressed — key: "Enter"
Mouse position — clientX, clientY
The actual input value — e.target.value

---

And it also comes with methods to control behaviour — preventDefault() to stop default browser actions, and stopPropagation() to stop the event from bubbling up to parent elements.
Understanding e properly makes so many React patterns suddenly make sense.

e.target.value — Breaking It Down
This trips people up at first but it's actually simple once you see the layers:
setDescription(e.target.value)

e is the event object — everything the browser knows about what just happened
e.target is the actual DOM element where the event happened — your box
e.target.value is what's currently typed inside that input

Three layers, each one pointing a little deeper. Once you see it that way it never confuses you again.

e.target.value Is Always a String — Don't Forget
This is a sneaky one. No matter what the user types — even if it looks like a number — e.target.value hands it back as a string. If you need an actual number, convert it explicitly:
Number(e.target.value) or the shorthand +e.target.value
That + at the front is a quick coercion trick. Both do the same thing — just pick one and stay consistent.

Reset After Submit — Always
When a user hits submit, your form should go back to a clean slate. Input fields empty, dropdowns back to their default option — everything reset. It's a small UX detail but users notice immediately when it doesn't happen:
setDescription("");
setCategory(0);
Do this inside your submit handler after you've processed the data. Clean form, happy user.