Q:

Module Build Failed when mapping Radio Input

OK, so this has been bugging me for days, and I haven't found the answer yet. I imagine I am doing something dumb ("semi-colon problems" I call them), but I can't find it. I am also new to React, so please chide me if I am doing something totally wrong.
I am getting the following error when I compile with webpack:
ERROR in ./src/client/app/components/SelectorComponent.jsx
Module build failed: SyntaxError: Unexpected token, expected , (12:56)

  10 |                 console.log(race);
  11 |                 return (
> 12 |                     <input type="radio" key={race._id}/>{race.raceDate} {race.location} {race.gender} {race.skill} {race.distance}
     |                                                         ^
  13 |                 )
  14 |             })}
  15 |            <input type="radio"/>Casper 2017<br/>

Here is my Component that is generating the error:
import React from 'react';
class SelectorComponent extends React.Component {
  render() {
    return (
      <div id='selector-component'>
        <h3>Race Selector</h3>
        <form>
            {this.props.races.map(function(race) {
                console.log(race);
                return (
                    <input type="radio" key={race._id}/>{race.raceDate} {race.location} {race.gender} {race.skill} {race.distance}
                )
            })}
           <input type="radio"/>Casper 2017<br/>
           <input type="radio"/>Laramie 2017
        </form>
      </div>
    );
  }
}

export default SelectorComponent;

Here is a list of things of a few ideas I have tried:

Removing the 'key' attribute (Does not fix error)
Using a paragraph tag (p) around the race data (Fixes error...but we want to use an input tag)

Which is what leads me to believe the error revolves around something I am doing wrong with the input tag.
Please let me know if you need anything else to help me.

A:

React v15 does not allow to return more than one parent element tag, meaning that if you have more than one element, these elements should be wrapped in a parent tag.
In your case you are effectively trying to return several elements, because <input /> and text are treated as separate elements. You need to wrap these with a parent element. Most commonly this is done with <span> or <label> tags.
Your modified code:
{this.props.races.map(function(race) {
    console.log(race);
    return (
      <label>
        <input type="radio" key={race._id}/>{race.raceDate} {race.location} {race.gender} {race.skill} {race.distance}
      </label>
    )
})}

