diff --git a/src/Question1-Header.js b/src/Question1-Header.js
index 1527b3b..98d8806 100644
--- a/src/Question1-Header.js
+++ b/src/Question1-Header.js
@@ -1,5 +1,5 @@
/* DELETE THIS LINE AND WRITE THE ANSWER TO QUESTION 1 HERE */
-
+import React from 'react';
/*
* ============= Question 1 =============
*
diff --git a/src/Question2-LionsExhibit.js b/src/Question2-LionsExhibit.js
index b31af8c..49a2b8a 100644
--- a/src/Question2-LionsExhibit.js
+++ b/src/Question2-LionsExhibit.js
@@ -10,6 +10,11 @@
import React from "react";
-const LionsExhibit = () => null;
+const LionsExhibit = () => (
+
+ Lions
+ The mane is the most recognisable feature of the species
+
+)
export default LionsExhibit;
diff --git a/src/Question3-TigersExhibit.js b/src/Question3-TigersExhibit.js
index ccfd252..2d896b3 100644
--- a/src/Question3-TigersExhibit.js
+++ b/src/Question3-TigersExhibit.js
@@ -18,12 +18,12 @@
import React from "react";
-function TigersExhibit() {
+function TigersExhibit(props) {
return (
Tigers
-
There are ... tigers in the world
-
{/* DELETE THIS LINE AND WRITE THE ANSWER PART B HERE */}
+
There are {props.population} tigers in the world
+
{props.habitats.map(habit => - {habit}
)}
);
}
diff --git a/src/Question4-MonkeysExhibit.js b/src/Question4-MonkeysExhibit.js
index bfefca0..3ff1959 100644
--- a/src/Question4-MonkeysExhibit.js
+++ b/src/Question4-MonkeysExhibit.js
@@ -4,19 +4,19 @@
* Convert the MonkeysExhibit component below to a class component.
*/
-import React from "react";
+import React, { Component } from 'react'
-function MonkeysExhibit(props) {
- return (
-
- Latin name: {props.latinName}
+export default class MonkeyExhibit extends Component {
+ render() {
+ return (
+
+ Latin name: {this.props.latinName}
- {props.commonSpecies.map((speciesName, index) => {
+ {this.props.commonSpecies.map((speciesName, index) => {
return - {speciesName}
;
})}
- );
+ )
+ }
}
-
-export default MonkeysExhibit;
diff --git a/src/Question5-AnimalSpotter.js b/src/Question5-AnimalSpotter.js
index b7136a2..057dabe 100644
--- a/src/Question5-AnimalSpotter.js
+++ b/src/Question5-AnimalSpotter.js
@@ -13,9 +13,14 @@ import React, { Component } from "react";
class AnimalSpotter extends Component {
constructor(props) {
super(props);
- this.state = {};
+ this.state = {
+ animalSpotted: 0
+ };
}
+ spotAnimal = () => {
+ this.setState(pre => ({ animalSpotted: pre.animalSpotted + 1}))
+ }
render() {
return (
@@ -28,7 +33,7 @@ class AnimalSpotter extends Component {
function CounterButton(props) {
return (
-