Q:

Each child in an array or iterator should have a unique "key" prop (Using Rails with React )

When I try to iterate through my variable badges and display each badge, I get this error : 

Each child in an array or iterator should have a unique "key" prop.

    var badges = author.badges.map((badge, index) => <span className="author__badge">
                                                        <Icon key={"icon" + index} name={`icon-${badge}`} />
                                                       </span>;
                                  );
      return (

          <span className="author__name">{author.name}</span>

            { author.badge === "" ||
                badges
            }
            <span className="author__nickname">{author.nickname}</span>
          </div>
      );

A:

As mentioned in React Documentation :

A good rule of thumb is that elements inside the map() call need keys.

You need to make use of key={ } and give it any unique value
When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort
So in your case one of the ways (You can amend it accordingly):
var badges = author.badges.map((badge, index) => 
              <span className="author__badge" key={index}>);

