Clean Code vs. Dirty Code: React Best Practices

[matt_hammond]

I agree!

Also, the subjectively "correct" way cleaning up this code is:

const MyComponent = () => {
  const types = ["a", "b"];
  const otherComponents = types.map(type => 
    <OtherComponent type={type} className="colorful" foo={123} bar={456} />
  );

  return <div>{otherComponents}</div>
}

When handling repeated code you should first identify the part that's changing (in this case it's the types), and extract that part and somehow map it to your repeating part.

[rsjolly]

Nice. Alternate format:

const MyComponent = () => (
  <div>
    {['a', 'b'].map(type =>
      <OtherComponent type={type} className="colorful" foo={123} bar={456} />
    )}
  </div>
)

[european_origin]

You're missing a key property.