Too many times I've written code like this:


class MyComponent extends React.PureComponent {
  render() {
    return <ul>
      {Object.keys(this.props.someDictionary).map(key => {
        return <li key={key}><b>{key}:</b> {this.props.someDictionary[key]}</li> 
      })}
    </ul>
  }
}

The clunky thing about this is that you have to reference the dictionary twice. Makes it harder to refactor. In Python, you do this instead:


for key, value in some_dictionary.items():
    print(f'$key: $value')

To do the same in JavaScript make a function like this:


function items(dict, fn) {
  return Object.keys(dict).map((key, i) => {
    return fn(key, dict[key], i)
  })
}

Now you can use it "more like Python":


class MyComponent extends React.PureComponent {
  render() {
    return <ul>
      {items(this.props.someDictionary, (key, value) => {
        return <li key={key}><b>{key}:</b> {value}</li> 
      })}
    </ul>
  }
}

Example on CodeSandbox here

UPDATE

Thanks to @Osmose and @saltycrane for alerting me to Object.entries().


class MyComponent extends React.PureComponent {
  render() {
    return <ul>
      {Object.entries(this.props.someDictionary).map(([key, value]) => {
        return <li key={key}><b>{key}:</b> {value}</li> 
      })}
    </ul>
  }
}

Updated CodeSandbox here

Comments

Mike Lane

Your python example is a little bit wrong. It should be this:

```python
for key, value in some_dictionary.items():
    print(f'{key}: {value}')
```

Your email will never ever be published.

Previous:
Run something forever in bash until you want to stop it February 13, 2018 Linux
Next:
csso and django-pipeline February 28, 2018 Python, Django, JavaScript
Related by category:
Switching from Next.js to Vite + wouter July 28, 2023 JavaScript, React
How to SSG a Vite SPA April 26, 2025 JavaScript, React
An ideal pattern to combine React Router with TanStack Query November 18, 2024 JavaScript, React
swr compared to @tanstack/react-query August 30, 2024 JavaScript
Related by keyword:
Fastest way to uniquify a list in Python >=3.6 December 23, 2017 Python
Be careful with using dict() to create a copy September 9, 2015 Python
TfL Traffic cameras on a Google map June 16, 2010 Web development
SmartDict - a smart 'dict' wrapper July 14, 2005 Python