Shotgun Episode Three

Shotgun Episode Three

Looping over child components in React. Read the blog post.

My favorite thing about JSX is that it’s not a simple token replace template engine. It’s a compile-to-JS DSL specifically designed to make working with UI feel like writing HTML: only better.

One of the consequences of that design decision is that JSX doesn’t need any constructs for looping or conditionals like many template languages have. Instead, you use regular JavaScript to handle those things. In the latest episode I demonstrated how to use Array.prototype.map() to loop over list children and render them into a list.

Here are some things you’ll learn about:

  • Looping in JSX
  • Conditional Classes in JSX
  • Factory Defaults for Test Data

Commit Log

Loop over child elements

  • Map over child elements
  • Separate child element component
  • Simple factory for test data
  • Easy conditional classnames

Links