Refactor component to be functional

src/SettingsContent.js

@@ -1,28 +1,27 @@
-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 (
 		<>
 			<h1 className="settings-header">Settings</h1>
 			<div className="settings-options-container">
 				<label>
 					<Checkbox
-							checked={this.props.soundInput}
+						checked={props.soundInput}
-							onChange={this.props.handleSoundInputChange}
+						onChange={props.handleSoundInputChange}
 						inputProps={{ 'aria-label': 'checkbox' }}
 					/>
 					<span>Sound</span>
 				</label>
 				<label>
 					<Checkbox
-							checked={this.props.coloredEdgesInput}
+						checked={props.coloredEdgesInput}
-							onChange={this.props.handleColoredEdgesInputChange}
+						onChange={props.handleColoredEdgesInputChange}
 						inputProps={{ 'aria-label': 'checkbox' }}
 					/>
 					<span>Coloured edges</span>
@@ -32,10 +31,10 @@ export default class SettingsContent extends Component {
 			<h2 className="settings-theme-header">Theme</h2>
 			<div className="settings-options-container">
 				{
-						this.props.themes.map((theme) =>
+					props.themes.map((theme) =>
 						<Button
-								onClick={() => this.props.handleThemeInputChange(theme)}
+							onClick={() => props.handleThemeInputChange(theme)}
-								icon={this.props.themeInput === theme && <CheckRoundedIcon />}
+							icon={props.themeInput === theme && <CheckRoundedIcon />}
 							className={`background--${theme}`}
 							key={theme}
 						>
@@ -52,4 +51,3 @@ export default class SettingsContent extends Component {
 		</>
 	)
 }
-}