title: React Hooks -- Uncaught Invariant Violation: Objects are not valid as a React child
body: <p>I'm working on the freeCodeCamp drum machine app. In my app with function arrow components, I set state of <code>display</code> with the useState hook in the parent component and pass it as a prop to the child component. In the parent component, I try to render the <code>display</code> state in a div. However, when the method is triggered (on click of the "drum pad" div), the app crashes. In the console I get an error that says "Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {display}). If you meant to render a collection of children, use an array instead." 
  I've been following along a YouTube tutorial for this project but using arrow function components and Hooks instead of regular classes as used in the tutorial--in the tutorial (around 1:55 of <a href="https://www.youtube.com/watch?v=Sqb5oMIa4yo" rel="nofollow noreferrer">this video</a>) the person successfully does what I'm trying to do, so I think the issue is something to do with using Hooks or arrow function components.</p>
  
  <pre><code>// APP COMPONENT (PARENT)
  
  const sounds = [
    { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
    // etc.
  ];
  
  const App = () =&gt; {
  
    const [display, setDisplay] = useState(''); // &lt;----
  
    const handleDisplay = display =&gt; { // &lt;----
      setDisplay({ display });
    }
  
    return (
      &lt;div className="App"&gt;
        &lt;div className="drum-machine"&gt;
          &lt;div className="display"&gt;
            &lt;p&gt;{display}&lt;/p&gt; // &lt;---- Related to error in console
          &lt;/div&gt;
          &lt;div className="drum-pads"&gt;
            {sounds.map(sound =&gt; (
              &lt;DrumPad
                id={sound.id}
                letter={sound.letter}
                src={sound.src}
                handleDisplay={handleDisplay} // &lt;----
              /&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  // DRUMPAD COMPONENT (CHILD)
  
  const DrumPad = ({ id, letter, src, handleDisplay }) =&gt; {
  
    let audio = React.createRef();
  
    const handleClick = () =&gt; {
      audio.current.play();
      audio.current.currentTime = 0;
      handleDisplay(id); // &lt;----
    }
  
    return (
      &lt;div
        className="drum-pad"
        id={id}
        onClick={handleClick}
      &gt;
        &lt;p className="letter"&gt;{letter}&lt;/p&gt;
        &lt;audio
          ref={audio}
          id={letter}
          src={src}
        &gt;
        &lt;/audio&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>