Brian Hafner Tech Blog

I’m reviewing React state management, which I still find a bit confusing.  This exercise comes from Colt Steele’s Advanced Coding Bootcamp on Udemy.  The goal of this exercise is to list four instructors and their hobbies, and with a setTimeout of 5000ms, randomly remove one of the instructor’s hobbies.  I randomly generate a number of one of the instructors on line 26.  On line 29, I use the map function to loop through the array.  When it comes to the randomly selected instructor, I randomly choose a hobby to remove.  On line 40, I use setState to update the display.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      instructors: [
        {
          name: 'Tim',
          hobbies: ['sailing', 'react']
        }, {
          name: 'Matt',
          hobbies: ['math', 'd3']
        }, {
          name: 'Colt',
          hobbies: ['css', 'hiking']
        }, {
          name: 'Elie',
          hobbies: ['music', 'es2015']
        }
      ]
    };
      
    setTimeout(() => {
      const randomNumber = Math.floor(Math.random() * this.state.instructors.length); 
      const randomHobbyNumber = Math.floor(Math.random() * this.state.instructors[randomNumber].hobbies.length);

      const instructors = this.state.instructors.map((instructor, index) => {
      console.log('randomNumber', randomNumber, 'randomHobbyNumber', randomHobbyNumber);
        if (index === randomNumber) {
          instructor.hobbies.splice(randomHobbyNumber,1);
          console.log('instructor - delete hobby',instructor, index)
          return instructor;
        } else { 
          console.log('instructor',instructor, index)
          return instructor;
        }
      });  
      this.setState({instructors})
    },5000);  
  }
    
  render() {

    const instructors = this.state.instructors.map((instructor, index) => (
      <li key={index}>
        <h3>{instructor.name}</h3>
        <h4>Hobbies: {instructor.hobbies.join(", ")}</h4>
      </li>
    ));
    return (
      <div className="App">
        <ul>
          {instructors}
        </ul>
      </div>
    );
  }
}

export default App;