Mohammed

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 =============
  *

src/Question2-LionsExhibit.js

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

src/Question3-TigersExhibit.js

@@ -18,12 +18,12 @@
 
 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(habit => <li key={habit}>{habit}</li>)}</ul>
  </div>
  );
 }

src/Question4-MonkeysExhibit.js

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

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 (
  <div className="animal-spotter">
@@ -28,7 +33,7 @@ class AnimalSpotter extends Component {
 
 function CounterButton(props) {
  return (
- <button style={{ background: "lightseagreen", color: "white" }} onClick>
+ <button style={{ background: "lightseagreen", color: "white" }} onClick={props.handleClick}>
  I spotted an animal!
  </button>
  );

src/Question6-ImageGallery.js

@@ -12,18 +12,30 @@ import React, { Component } from "react";
 
 class ImageGallery extends Component {
  constructor(props) {
- super(props);
+ super(props)
  this.state = {
- imgSrc: null
- };
+ imgSrc: null,
+ isLoading: true
+ }
  }
 
  fetchData = () => {
- fetch().then(res => res.json());
- };
+ fetch("https://auspicious-baritone.glitch.me/gorilla")
+ .then(res => res.json())
+ .then(data =>
+ this.setState({ imgSrc: data, isLoading: false }))
+ }
+ componentDidMount() {
+ this.fetchData()
+ }
+
 
  render() {
- return <img src={this.state.imgSrc} alt="An animal" />;
+ return this.state.isLoading ? (
+ <span>Loading...</span>
+ ) : (
+ <img src={this.state.imgSrc} alt="An animal" />
+ )
  }
 }
 

src/Question7-WindowSize.js

@@ -27,6 +27,10 @@ export class WindowSize extends Component {
  componentDidMount() {
  window.addEventListener("resize", this.handleWindowResize);
  }
+ componentWillUnmount() {
+ window.removeEventListener("resize", this.handleWindowResize)
+ }
+
 
  handleWindowResize = () => {
  console.log("Window was resized!", window.innerWidth);