Front End Development Libraries Projects - Build a Random Quote Machine

Tell us what’s happening:

I implemented my random quote machine with ReactJS but I need to use id to identify several components, but I have used className. Is there a way to include id into React? Or is there a way for me to pass the tests with classNames as IDs?

Your code so far

return (
        <div className={'App'}>
            <div className='quote-box' style={styles['quote-box']}>
                <RandomQuote id='text' quote={curQuote}/>
                <button className='new-quote' onClick={randomQuote}>New Quote? Click me!</button>
                <a className='tweet-quote' href="https://twitter.com/intent/tweet">Tweet
                    quote!</a>
            </div>
        </div>
    );

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Challenge Information:

Front End Development Libraries Projects - Build a Random Quote Machine

React does support ids. All the major HTML frameworks do. You even have an id on your RandomQuote component element.

As for passing the tests with a className attribute as an id, it won’t work chief. The tests expect certain things to be present for them to pass. Class names in the place of IDs are not one of them.

I see. I changed everything now to id instead of classNames (basically only those for the tests e.g. quote-box) yet still the test says that I didnt correctly set up the IDs apparently.

return (
        <div className={'App'}>
            <div id="quote-box" style={styles['quote-box']}>
                <RandomQuote id="text" quote={curQuote}/>
                <button id="new-quote" onClick={randomQuote}>New Quote? Click me!</button>
                <a id="tweet-quote" href="https://twitter.com/intent/tweet">Tweet
                    quote!</a>
            </div>
        </div>
    );

Basically my whole code is a clusterf… of several react components because I first tried to implement a Random quote machine in WebStorm locally, then I copy/paste my code and all sub components in this one Javascript file in codepen. Should I just retry? Am I allowed to share my whole javascript file here?

Please provide your code in a repo or on Stackblitz, Codesandbox, Codepen, etc.


<RandomQuote id="text" quote={curQuote}/>

The id on a component is a prop not an HTML attribute. You would need to use the id prop and set it on the actual HTML element inside the RandomQuote component.

I hope my code can be seen here under this link.

It shows even problems with quote-boc, maybe I am still missing something…

That isn’t a working example. You have imports that can’t work on Codepen and your quote API data is missing.

If I remove the broken imports and assign quotes an array with a quote object, it passes all the tests except for the last layout test (the centering test). For that test, it is the quote-box element that should be centered, not just its content. So, the element must have a width and be centered on the page (using auto margin or flexbox/grid).

What do I have to import tho and how do I link my CSS file to my HTML File when I can’t determine the filename? This is my first time using codepen btw, which is why i’m more confused.
I wouldve said that I need to import the state hook for obvious reasons, but is there anything else I need to import to make my application run?

EDIT: Nvm I finally got it just imported the necessary libraries but in a way so it is recognized by codepen (I just clicked that yellow qeustion mark at the top right)
No I’, also having the 11 test passed scenario. Thank you both for your help

Your Codepen is passing all the tests for me.

Can we mark this thread as solved?

Yes thread can be closed now :+1: