Refactor component to be functional

src/SettingsContent.js

@@ -1,55 +1,53 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
 import { CheckRounded as CheckRoundedIcon } from "@material-ui/icons";
 import Button from "./Button";
 
 import "./css/SettingsContent.css";
 
-export default class SettingsContent extends Component {
+export default function SettingsContent (props) {
-	render() {
+	return (
-		return (
+		<>
-			<>
+			<h1 className="settings-header">Settings</h1>
-				<h1 className="settings-header">Settings</h1>
+			<div className="settings-options-container">
-				<div className="settings-options-container">
+				<label>
-					<label>
+					<Checkbox
-						<Checkbox
+						checked={props.soundInput}
-							checked={this.props.soundInput}
+						onChange={props.handleSoundInputChange}
-							onChange={this.props.handleSoundInputChange}
+						inputProps={{ 'aria-label': 'checkbox' }}
-							inputProps={{ 'aria-label': 'checkbox' }}
+					/>
-						/>
+					<span>Sound</span>
-						<span>Sound</span>
+				</label>
-					</label>
+				<label>
-					<label>
+					<Checkbox
-						<Checkbox
+						checked={props.coloredEdgesInput}
-							checked={this.props.coloredEdgesInput}
+						onChange={props.handleColoredEdgesInputChange}
-							onChange={this.props.handleColoredEdgesInputChange}
+						inputProps={{ 'aria-label': 'checkbox' }}
-							inputProps={{ 'aria-label': 'checkbox' }}
+					/>
-						/>
+					<span>Coloured edges</span>
-						<span>Coloured edges</span>
+				</label>
-					</label>
+			</div>
-				</div>
 
-				<h2 className="settings-theme-header">Theme</h2>
+			<h2 className="settings-theme-header">Theme</h2>
-				<div className="settings-options-container">
+			<div className="settings-options-container">
-					{
+				{
-						this.props.themes.map((theme) =>
+					props.themes.map((theme) =>
-							<Button
+						<Button
-								onClick={() => this.props.handleThemeInputChange(theme)}
+							onClick={() => props.handleThemeInputChange(theme)}
-								icon={this.props.themeInput === theme && <CheckRoundedIcon />}
+							icon={props.themeInput === theme && <CheckRoundedIcon />}
-								className={`background--${theme}`}
+							className={`background--${theme}`}
-								key={theme}
+							key={theme}
-							>
+						>
-								{
+							{
-									theme.split("-")
+								theme.split("-")
-										.map((word) =>
+									.map((word) =>
-											word[0].toUpperCase() + word.substring(1)
+										word[0].toUpperCase() + word.substring(1)
-										).join(" ")
+									).join(" ")
-								}
+							}
-							</Button>
+						</Button>
-						)
+					)
-					}
+				}
-				</div>
+			</div>
-			</>
+		</>
-		)
+	)
-	}
 }