Random Quote Machine React problem - how do I render different props in different HTML elements?

JavaScript
#1

Hello, this is my first post on this forum, so sorry, if this was covered already.

So basically, I’m trying to randomize those quotes with React components, and I have two elements: one is meant to display quote, another - its author.

But my React script always renders both either in quote element, or author element.

Here is my progress so far.

So, my question is - how do I make React render child components in separate HTML elements? Also, they are linked with parent state property - quote index must align with author index.

#2

All of your “html” should be in your React. You have to let React handle it all.

The only thing you should have in your html should be:

<div id="app"></div>

and your React JS hooks up to that because at the bottom of that pane is:

ReactDOM.render(<App />, document.getElementById("app"))

You can have a different id for the HTML component and you can call the root component something else, (like you had it as “QuoteComponent”) but these are pretty standard.

1 Like
#3

Thank you so much for the response! How silly of me that after all tutorials I still did not grasp the big picture of how to use react :smiley:

One more question - how, then, should I style my app in Codepen enviroment? Do I need to import CSS file somehow, or write CSS above components?

#4

You style it like any other page. The output is still just HTML, CSS, and JS.

For example, if a component renders an h1 you can target the element. Or you can give the element a class or an id and target that.

#5

Hey, it’s confusing stuff. It’s hard to teach, harder to learn, and then you need to transfer it all to the codepen environment…

lasjorg answered your CSS question.

Go ahead and apply that information and then if you still get stuck, ask a new question - that’s why the forum is here.

1 Like