JavaScript30 | 30 Day Vanilla JS Challenge | Runtime Evironment library

I have been working on the array exercise on Wes Bos's JavaScript30. Please help me out with this exercise., which is #8.

The code in the video is the following.

I'm a newbie to React and currently building a drum-machine. I have wired up the drum-machine to play an audio contained inside its DrumPad child component.My problem is am failing make an id representing each audio display whenever its parent drum-pad div is clicked. I know I need to initialize state and then setState but I dont know how to implement it in my code.

here is my code

I'm building a fcc-drum machine using React I get the following error when trying to map a data object:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Below is the data that I am trying to map along with my code:

I`m on the Javascript30 #1 now, and I`ve been wondering about a small stuff...

This code below worked.

I am trying to create a swim image gallery based off of the Flex Panel Gallery from Javascript30 (Repo Link). When trying to display the site in a browser, the images immediately go out of frame and all I can see is the background of the five flex columns on the page.

I am unsure as to why they are pushed downwards out of view in the browser and why the text (which isn't in column orientation) doesn't appear until after I click within the columns.

This is from the Javascript30 course. I am making a clock but I want to make the hour hand shorter than the minute hand. The minute hand is currently set to a width of 50%. I want to set the hour hand to 40%. But when I change the width to 40%, it seems to rotate from a different origin. Then I changed the transform-origin to 120% but it seems like it is centered differently?

Why doesn't console.table() work for all objects / arrays?

With some data I get a nicely formatted table in the developer console. With other data I get nothing... not even an error message.

I just learned about console.table() while going through the challenges of #Javascript30. The presenter used console.table() for some of the output, but not all, and he didn't explain why. I tried to use it for all of the (array or object) output and saw why... it doesn't work.

Here's an example of one that doesn't work.

I recently have been learning more JavaScript as I am going to be using it a lot for an upcoming internship. The company recommended many different resources for me to look at, but a friend of mine also suggested this website:

https://javascript30.com/

I decided to give it a try and started yesterday on the first project which was a JavaScript drumkit.

So the overall project wasn't hard, but I noticed a little bug that was happening. So the project attaches a 'keydown' event listener to several different HTML elements that trigger when either ASDFGHJKJL are pressed. In addition to playing a sound, the listener also attaches a class to the element that adds a little effect to the key being pressed.

To remove the class, we attached a transitionend listener to the elements. So when the CSS property finishes the transition after the key is pressed, the class is then removed and the graphic goes back to normal in the browser.

Now if you press the keys slowly, it works perfectly fine. But I noticed that if you were to hold a key down for a second or two, it appears as though the class that gets added is never removed and the graphic is permanent. I then checked the console and noticed that the transitionend event never fires once it gets stuck like that.

Here is the code from the finished file.

I am looking to generate search suggestions that match data collected, like so:

As you type in you get suggestions:

I am referencing some of the tutorial work from WesBos:

https://github.com/wesbos/JavaScript30/blob/master/06%20-%20Type%20Ahead/index-FINISHED.html

I've got the data logging in the console but now I am unsure how to get it to render. Below are my components (My thoughts were to generate the divs as a loop in App.js and pass the props to Match.js which I would eventually import but I am not sure if I am approaching this wrong):

App.js