Need help with jsx

I’m having trouble figuring out how this all fits together. Why isn’t my button aligning to the right? Unless I use float, but then it’s no longer in the box I have. Is there a better way to do this?

And if there are any other problems you see please let me know.

Hey Eduardo,

Because you don’t tell it to go to the right.

Currently you have this:


h1 and h2 are block elements, they take the whole width. Your button goes below them.

You can use Flexbox to solve this.

In your HTML, you added a root container for React and some other HTML stuff.

<div id="root"></div>

<div id='quote-box'>
  <h2 id='text'></h2>
  <h3 id='author'></h3>
  <button id='new-quote' ></button>
  <a href="" id='tweet-quote'>a</a>

Why did you add this HTML?

If I remove the html I fail some tests, is that html not suppose to be there? I did notice my button and a are showing twice, but I’m not sure how to fix this.

I think I’ve made some fixes.

Seems to work now :+1:

When you use React, React is creating the HTML for you, so no need to have additional HTML in the body, just the container for React.

I’ve been having trouble figuring out how to change my body background in the render. How can I achieve this? I am trying to set the main background color to the color of the text.

Your code works for me:

body {
  font-family: 'Roboto';

How can I change it here? So that it matches with h1 and h2 with one of the colors from theColors

 render() {
    return (
        <div id='quote-box'>
      <h1 id='text' style={{color:theColors[this.state.index]}}>{'“' + theQuotes[this.state.index].quote}</h1>
      <h2 id='author' style={{color:theColors[this.state.index]}}>{'- -' + theQuotes[this.state.index].author}</h2>
        <div id='share'>
        <button id='twitter'  style={{backgroundColor:theColors[this.state.index]}}>
          <a id='tweet-quote' href="">Share</a>
          <a href="" class="twitter-share-button" data-show-count="false">Tweet</a>
          <button id='new-quote' style={{backgroundColor: theColors[this.state.index]}} onClick={this.handleClick}>New Quote</button>