Drum Machine Test #7 Failing

amberdiehl · August 31, 2018, 5:00pm

Hi there,

I am seeking someone’s help! For the life of me I cannot figure out why my app won’t pass test number 7. I can see the unique string for each audio item being displayed as I play each audio clip, and the text is correct when I use console.log on the element’s inner text.

Thanks in advance for your help.

github.com

amberdiehl/freecodecamp/blob/master/drum-machine/src/App.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './App.css';

const AudioPlayer = (props) => {
    return (
        <div id={props.id} className="col-md-2 drum-pad">
            {props.letter}
            <audio id={props.letter} className="clip" src={props.item}
                type="audio/wav">
            </audio>
        </div>
    );
};
AudioPlayer.propTypes = {
    id: PropTypes.string.isRequired,
    letter: PropTypes.string.isRequired,
    item: PropTypes.string.isRequired,
};

This file has been truncated. show original

s_coder · August 31, 2018, 5:13pm

It’s my understanding you shouldn’t be updating the DOM directly when using React.JS. It’s considered bad practice.

Now, I am not sure if that is the reason why test #7 isn’t passing but perhaps there is an interaction with the Virtual React DOM and the #display element causing the text to fail?

I would try maybe sticking the display text in the state and changing the text using this.setState({display: … }); Good luck, I’m working on the Drum Machine project right now too.

amberdiehl · August 31, 2018, 5:14pm

Excellent point. You are most correct. That may not be the cause, but you are right that I should fix it. I’ll do that now. Thank you!

s_coder · August 31, 2018, 5:15pm

Let us know if you figure it out!

amberdiehl · August 31, 2018, 5:24pm

Well, I changed that–easy change, obviously. But it still fails the test. I would like to see how the test is actually written because from what I see, this code passes.

amberdiehl · August 31, 2018, 8:37pm

Nothing like looking at the code!

This project expects each drum pad to have a click event, too. I’m just capturing keyboard input. I need to rewrite my project attach an event to each drum pad and then I think it will pass.

            drumPads.forEach(pad => {
              __triggerClickEventCaller(pad);
              displayText.push(document.getElementById('display').innerText);
            });

s_coder · September 4, 2018, 8:06pm

@amberdiehl Did you ever get this working? I just finished my Drum Machine well enough that it passes all tests.

amberdiehl · September 4, 2018, 11:19pm

Ah, you’re being mean! No, I have not spent time on it. I took the weekend off a bit and today have been busy with client work. That said, I think I’ll spend a little time on it now and see if I can close it out. The calculator looks like fun.

Here’s the Github link you were asking about: https://github.com/freeCodeCamp/freeCodeCamp