React – state

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) {
    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 =, index) => {
      console.log('randomNumber', randomNumber, 'randomHobbyNumber', randomHobbyNumber);
        if (index === randomNumber) {
          console.log('instructor - delete hobby',instructor, index)
          return instructor;
        } else { 
          console.log('instructor',instructor, index)
          return instructor;
  render() {

    const instructors =, index) => (
      <li key={index}>
        <h4>Hobbies: {instructor.hobbies.join(", ")}</h4>
    return (
      <div className="App">

export default App;


Leave a Reply

Your email address will not be published. Required fields are marked *