Need help with jsx

JavaScript
1

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.

2

Hey Eduardo,

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

Currently you have this:

div
  h1
  h2
  button
  a

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="twitter.com/intent/tweet" id='tweet-quote'>a</a>
</div>

Why did you add this HTML?

3

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.

4

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.

5

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.

6

Your code works for me:

body {
  font-family: 'Roboto';
  background-color:pink;
}
7

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="twitter.com/intent/tweet">Share</a>
          </button>
          
          
          <a href="twitter.com/intent/tweet" 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>
        </div>
          
        </div>
       
        
    
    )
  }
  
};