Add rule to enforce spacing in curly brackets in JSX children

This required an updated in version of eslint-plugin-react to 7.4.0.

src/components/views/groups/GroupInviteTile.js

@@ -50,7 +50,7 @@ export default React.createClass({
             className="mx_GroupInviteTile_name"
             dir="auto"
         >
-            {this.props.group.name}
+            { this.props.group.name }
         </EmojiText>;
 
         const badge = <div className="mx_GroupInviteTile_badge">!</div>;
@@ -58,11 +58,11 @@ export default React.createClass({
         return (
             <AccessibleButton className="mx_GroupInviteTile" onClick={this.onClick}>
                 <div className="mx_GroupInviteTile_avatarContainer">
-                    {av}
+                    { av }
                 </div>
                 <div className="mx_GroupInviteTile_nameContainer">
-                    {label}
-                    {badge}
+                    { label }
+                    { badge }
                 </div>
             </AccessibleButton>
         );

src/components/views/groups/GroupMemberInfo.js

@@ -128,7 +128,7 @@ module.exports = withMatrixClient(React.createClass({
             kickButton = (
                 <AccessibleButton className="mx_MemberInfo_field"
                         onClick={this._onKick}>
-                    {_t('Remove from group')}
+                    { _t('Remove from group') }
                 </AccessibleButton>
             );
 
@@ -143,11 +143,11 @@ module.exports = withMatrixClient(React.createClass({
         if (kickButton || adminButton) {
             adminTools =
                 <div className="mx_MemberInfo_adminTools">
-                    <h3>{_t("Admin Tools")}</h3>
+                    <h3>{ _t("Admin Tools") }</h3>
 
                     <div className="mx_MemberInfo_buttons">
-                        {kickButton}
-                        {adminButton}
+                        { kickButton }
+                        { adminButton }
                     </div>
                 </div>;
         }
@@ -173,13 +173,13 @@ module.exports = withMatrixClient(React.createClass({
             <div className="mx_MemberInfo">
                 <GeminiScrollbar autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel"onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18"/>
+                        <img src="img/cancel.svg" width="18" height="18" />
                     </AccessibleButton>
                     <div className="mx_MemberInfo_avatar">
-                        {avatar}
+                        { avatar }
                     </div>
 
-                    <EmojiText element="h2">{groupMemberName}</EmojiText>
+                    <EmojiText element="h2">{ groupMemberName }</EmojiText>
 
                     <div className="mx_MemberInfo_profile">
                         <div className="mx_MemberInfo_profileField">

src/components/views/groups/GroupMemberList.js

@@ -135,7 +135,7 @@ export default withMatrixClient(React.createClass({
             <form autoComplete="off">
                 <input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
                         onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={ _t('Filter group members') } />
+                        placeholder={_t('Filter group members')} />
             </form>
         );
 
@@ -146,7 +146,7 @@ export default withMatrixClient(React.createClass({
                 <GeminiScrollbar autoshow={true} className="mx_MemberList_joined mx_MemberList_outerWrapper">
                     <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
                             createOverflowElement={this._createOverflowTile}>
-                        {this.makeGroupMemberTiles(this.state.searchQuery)}
+                        { this.makeGroupMemberTiles(this.state.searchQuery) }
                     </TruncatedList>
                 </GeminiScrollbar>
             </div>

src/components/views/groups/GroupRoomList.js

@@ -123,7 +123,7 @@ export default React.createClass({
             <form autoComplete="off">
                 <input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
                         onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                        placeholder={ _t('Filter group rooms') } />
+                        placeholder={_t('Filter group rooms')} />
             </form>
         );
 
@@ -134,7 +134,7 @@ export default React.createClass({
                 <GeminiScrollbar autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
                     <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
                             createOverflowElement={this._createOverflowTile}>
-                        {this.makeGroupRoomTiles(this.state.searchQuery)}
+                        { this.makeGroupRoomTiles(this.state.searchQuery) }
                     </TruncatedList>
                 </GeminiScrollbar>
             </div>

src/components/views/groups/GroupRoomTile.js

@@ -71,10 +71,10 @@ const GroupRoomTile = React.createClass({
         return (
             <AccessibleButton className="mx_GroupRoomTile" onClick={this.onClick}>
                 <div className="mx_GroupRoomTile_avatar">
-                    {av}
+                    { av }
                 </div>
                 <div className="mx_GroupRoomTile_name">
-                    {name}
+                    { name }
                 </div>
             </AccessibleButton>
         );