Miles Quiz

src/Question1-Header.js

@@ -1,4 +1,4 @@
-/* DELETE THIS LINE AND WRITE THE ANSWER TO QUESTION 1 HERE */
+import React from "react";
 
 /*
  * ============= Question 1 =============

src/Question2-LionsExhibit.js

@@ -10,6 +10,15 @@
 
 import React from "react";
 
-const LionsExhibit = () => null;
+const LionsExhibit = () => {
+ return(
+ <div>
+ <article className="lions">
+ <h2>Lions</h2>
+ <p>The mane is the most recognisable feature of the species</p>
+ </article>
+ </div>
+ )
+};
 
 export default LionsExhibit;

src/Question3-TigersExhibit.js

@@ -18,12 +18,18 @@
 
 import React from "react";
 
-function TigersExhibit() {
+function TigersExhibit(props) {
  return (
  <div className="tigers">
  <h2>Tigers</h2>
- <p>There are ... tigers in the world</p>
- <ul>{/* DELETE THIS LINE AND WRITE THE ANSWER PART B HERE */}</ul>
+ <p>There are {props.population} tigers in the world</p>
+ <ul>{props.habitats.map((habitat) => {
+ return(
+ <div>
+ <li>{habitat}</li>
+ </div>
+ )
+ })}</ul>
  </div>
  );
 }

src/Question4-MonkeysExhibit.js

@@ -4,19 +4,22 @@
  * Convert the MonkeysExhibit component below to a class component.
  */
 
-import React from "react";
+import React, { Component } from "react";
+class MonkeysExhibit extends Component{
 
-function MonkeysExhibit(props) {
- return (
- <section className="monkeys">
- <h2>Latin name: {props.latinName}</h2>
- <ul>
-{props.commonSpecies.map((speciesName, index) => {
- return <li key={index}>{speciesName}</li>;
- })}
- </ul>
+ render(){
+return (
+<section className="monkeys">
+<h2>Latin name: {this.props.latinName}</h2>
+<ul>
+ {this.props.commonSpecies.map((speciesName, index) => {
+return <li key={index}>{speciesName}</li>;
+})}
+</ul>
  </section>
- );
-}
-
-export default MonkeysExhibit;
+ );
+ }
+ }
+
+ export default MonkeysExhibit;
+

src/Question5-AnimalSpotter.js

@@ -13,9 +13,17 @@ import React, { Component } from "react";
 class AnimalSpotter extends Component {
  constructor(props) {
  super(props);
- this.state = {};
+ this.state = {
+ animalSpotted: 0
+ };
  }
 
+ spotAnimal = () => {
+ this.setState({
+ animalSpotted: this.state.animalSpotted++
+ })
+ }
+
  render() {
  return (
  <div className="animal-spotter">
@@ -26,11 +34,15 @@ class AnimalSpotter extends Component {
  }
 }
 
+
+
 function CounterButton(props) {
  return (
- <button style={{ background: "lightseagreen", color: "white" }} onClick>
- I spotted an animal!
- </button>
+ <div>
+ <button style={{ background: "lightseagreen", color: "white" }} onClick>
+ I spotted an animal!
+ </button>
+ </div>
  );
 }