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.