{
  "id": 2396336,
  "title": "Wait, Square Brackets Aren't Just for Arrays? — A Controlled Component Gotcha",
  "url": "https://urgent.news/2026/08/21/wait-square-brackets-arent-just-for-arrays-a-controlled-component",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-21T15:21:08.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/blackjosh007/wait-square-brackets-arent-just-for-arrays-a-controlled-component-gotcha-539m"
  },
  "original_language": "en",
  "account": "While constructing a meme generator using React (inspired by the freeCodeCamp tutorials), the writer encountered a perplexing moment in their JavaScript syntax understanding. They were creating a controlled component, composed of two text inputs that updated state as the user typed. The handler function looked like this: function handleChange(event) { const { value, name } = event.currentTarget; setMemeText(prevMeme = ({ ...prevMeme, [name]: value })); }\n\nThe square brackets in the [name]: value line initially threw the writer off. They were accustomed to interpreting square brackets as array indicators, so the line seemed like an array operation inside an object spread. However, the reality was much simpler. The [name] was a computed property name. The name variable held a string value, either \"topText\" or \"bottomText\" (determined by the input's name attribute). Wrapping it in brackets allowed JavaScript to interpret the variable's value rather than using the literal string as the key. Without the brackets, the code would spread the previous state and add a property called \"name\" set to the typed value, which was not the desired outcome. The writer needed the actual key to be \"topText\" or \"bottomText\" depending on which input triggered the event. This one line of code, with its small syntax convention, transformed the function into a versatile solution capable of handling both inputs without the need for separate handlers. The writer traced the full loop, from the JSX attribute to the event object, destructuring the variable, and finally to the computed key. This realization revealed the true purpose of the computed property name and how it simplified the code. A key takeaway from this experience is to recognize when square brackets in an object literal represent a computed property name, rather than an array. This small piece of syntax can make a significant difference in the functionality of the code. The writer continues to work through the freeCodeCamp React course, eagerly anticipating the real project builds that await them.",
  "summary": "While building a meme generator with React (following freeCodeCamp), I hit a moment where my mental model of JavaScript syntax completely betrayed me — and untangling it taught me something I won't forget. I was building a controlled component: two text inputs (top text, bottom text) that update state as the user types. Here's the handler: function handleChange ( event ) { const { value , name }…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}