| Conditions | 3 | 
| Total Lines | 96 | 
| Code Lines | 90 | 
| Lines | 0 | 
| Ratio | 0 % | 
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | import { StaticQuery, graphql } from "gatsby" | ||
| 189 |   renderPlayerGamesFull = () => { | ||
| 190 |     if (this.state.loading === false && this.state.data) { | ||
| 191 |       const { gameReports = [] } = this.state.data | ||
| 192 | |||
| 193 | return ( | ||
| 194 |         <Card className={`player-detail__games`} title="Wedstrijden" hasTable={true}> | ||
| 195 |           <table className={`player-detail__games__table responsive-card-table`}> | ||
| 196 | <thead> | ||
| 197 | <tr> | ||
| 198 |                 <th className={`player-detail__column player-detail__column--string`}>Team</th> | ||
| 199 |                 <th className={`player-detail__column player-detail__column--string`}>Type</th> | ||
| 200 |                 <th className={`player-detail__column player-detail__column--string`}>Datum</th> | ||
| 201 |                 <th className={`player-detail__column player-detail__column--number`}> | ||
| 202 | <span title="Thuis/uit">H/A</span> | ||
| 203 | </th> | ||
| 204 |                 <th className={`player-detail__column player-detail__column--score`}>Score</th> | ||
| 205 |                 <th className={`player-detail__column player-detail__column--string`}>Tegenstander</th> | ||
| 206 |                 <th className={`player-detail__column player-detail__column--number`}> | ||
| 207 | <img | ||
| 208 |                     src={iconCardYellow} | ||
| 209 | title="Gele kaart" | ||
| 210 | alt="Gele kaart" | ||
| 211 | className="player-detail__stats--header_icon" | ||
| 212 | /> | ||
| 213 | </th> | ||
| 214 |                 <th className={`player-detail__column player-detail__column--number`}> | ||
| 215 | <img | ||
| 216 |                     src={iconCardRed} | ||
| 217 | title="Rode kaart" | ||
| 218 | alt="Rode kaart" | ||
| 219 | className="player-detail__stats--header_icon" | ||
| 220 | /> | ||
| 221 | </th> | ||
| 222 |                 <th className={`player-detail__column player-detail__column--number`}> | ||
| 223 | <img | ||
| 224 |                     src={iconGoal} | ||
| 225 | title="Doelpunten gescoord" | ||
| 226 | alt="Rode kaart" | ||
| 227 | className="player-detail__stats--header_icon" | ||
| 228 | /> | ||
| 229 | </th> | ||
| 230 |                 <th className={`player-detail__column player-detail__column--number`}> | ||
| 231 | <span title="Minuten gespeeld"> | ||
| 232 | <Icon icon="fa-clock-o" /> | ||
| 233 | </span> | ||
| 234 | </th> | ||
| 235 | </tr> | ||
| 236 | </thead> | ||
| 237 | <tbody> | ||
| 238 |               {gameReports.map(function (game) { | ||
| 239 | return ( | ||
| 240 | <tr> | ||
| 241 |                     <td data-label="Team" className={`player-detail__column player-detail__column--string`}> | ||
| 242 |                       {game.team.replace(`Voetbal : `, ``)} | ||
| 243 | </td> | ||
| 244 |                     <td data-label="Type" className={`player-detail__column player-detail__column--string`}> | ||
| 245 |                       {game.competition} | ||
| 246 | </td> | ||
| 247 |                     <td data-label="Datum" className={`player-detail__column player-detail__column--string`}> | ||
| 248 |                       {moment(game.date).format(`DD/MM/YYYY`)} | ||
| 249 | </td> | ||
| 250 |                     <td data-label="Thuis/uit" className={`player-detail__column player-detail__column--number`}> | ||
| 251 |                       {game.home ? ( | ||
| 252 |                         <span className={`player-detail__games__home`} title="Thuiswedstrijd"> | ||
| 253 | <Icon icon="fa-home" alt="Thuiswedstrijd" /> | ||
| 254 | </span> | ||
| 255 | ) : ( | ||
| 256 |                         <span className={`player-detail__games__away`} title="Uitwedstrijd"> | ||
| 257 | <Icon icon="fa-bus" alt="Uitwedstrijd" /> | ||
| 258 | </span> | ||
| 259 | )} | ||
| 260 | </td> | ||
| 261 |                     <td data-label="Score" className={`player-detail__column player-detail__column--score`}> | ||
| 262 |                       {game.goalsHomeTeam} - {game.goalsAwayTeam} | ||
| 263 | </td> | ||
| 264 |                     <td data-label="Tegenstander" className={`player-detail__column player-detail__column--string`}> | ||
| 265 |                       {game.opponent} | ||
| 266 | </td> | ||
| 267 |                     <td data-label="Gele kaart(en)" className={`player-detail__column player-detail__column--number`}> | ||
| 268 |                       {game.yellowCards} | ||
| 269 | </td> | ||
| 270 |                     <td data-label="Rode kaart(en)" className={`player-detail__column player-detail__column--number`}> | ||
| 271 |                       {game.redCards} | ||
| 272 | </td> | ||
| 273 |                     <td data-label="Doelpunten" className={`player-detail__column player-detail__column--number`}> | ||
| 274 |                       {game.goals} | ||
| 275 | </td> | ||
| 276 |                     <td data-label="Speeltijd" className={`player-detail__column player-detail__column--number`}> | ||
| 277 |                       {game.minutesPlayed}' | ||
| 278 | </td> | ||
| 279 | </tr> | ||
| 280 | ) | ||
| 281 | })} | ||
| 282 | </tbody> | ||
| 283 | </table> | ||
| 284 | </Card> | ||
| 285 | ) | ||
| 371 |