diff --git a/common/app/Map/Block.jsx b/common/app/Map/Block.jsx
index 1e7b6f7a98..f358094798 100644
--- a/common/app/Map/Block.jsx
+++ b/common/app/Map/Block.jsx
@@ -6,7 +6,7 @@ import FA from 'react-fontawesome';
import { Panel } from 'react-bootstrap';
import ns from './ns.json';
-import Challenge from './Challenge.jsx';
+import Challenges from './Challenges.jsx';
import {
toggleThisPanel,
@@ -26,7 +26,7 @@ function makeMapStateToProps(_, { dashedName }) {
dashedName,
title: block.title,
time: block.time,
- challenges: block.challenges
+ challenges: block.challenges || []
};
}
);
@@ -66,18 +66,6 @@ export class Block extends PureComponent {
);
}
- renderChallenges(challenges) {
- if (!Array.isArray(challenges) || !challenges.length) {
- return
No Challenges Found
;
- }
- return challenges.map(dashedName => (
-
- ));
- }
-
render() {
const {
title,
@@ -97,7 +85,7 @@ export class Block extends PureComponent {
key={ title }
onSelect={ this.handleSelect }
>
- { isOpen && this.renderChallenges(challenges) }
+ { isOpen && }
);
}
diff --git a/common/app/Map/Challenges.jsx b/common/app/Map/Challenges.jsx
new file mode 100644
index 0000000000..975553a48a
--- /dev/null
+++ b/common/app/Map/Challenges.jsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import Challenge from './Challenge.jsx';
+
+const propTypes = {
+ challenges: PropTypes.array.isRequired
+};
+
+export default class Challenges extends Component {
+ shouldComponentUpdate(nextProps) {
+ return this.props.challenges !== nextProps.challenges;
+ }
+ render() {
+ const { challenges } = this.props;
+ if (!challenges.length) {
+ return No Challenges Found
;
+ }
+ return (
+
+ {
+ challenges.map(dashedName => (
+
+ ))
+ }
+
+ );
+ }
+}
+
+Challenges.displayName = 'Challenges';
+Challenges.propTypes = propTypes;