Please how can I make bootstrap work with my react code in codepen

JavaScript
1

The react code below is not working with bootstrap in codepen please can someone help me out ?

class QuotesComponent extends React.Component {
constructor(props){
super(props);
this.state ={
input: ‘’
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(event){
this.setState({
input: event.target.value
});

}

render(){
let selec = quoteObj[Math.floor(Math.random()* quoteObj.length)];
var singlequote = selec.quote;
var singleauth = selec.author;
let color = colors[Math.floor(Math.random()* colors.length)];

  return(
  <div id ="quote-box" style ={{background: color}}>
      <p id ="rep">""{selec.quote}""</p><br /><br/>
  <div class ="quote-author" style ={{float: "right"}}><span id ="author">--{selec.author}</span></div><br /><br /><br/>
      <button class ="tweet-button">   
<a   
    class="button"
    id="tweet-quote"
    title="Tweet this quote!"
    target="_top"
  >
    <i class="fa fa-twitter">tweet</i>
  </a>
New quote ); } }

var colors = [
‘#16a085’,
‘#27ae60’,
‘#2c3e50’,
‘#f39c12’,
‘#e74c3c’,
‘#9b59b6’,
‘#FB6964’,
‘#342224’,
‘#472E32’,
‘#BDBB99’,
‘#77B1A9’,
‘#73A857’
];

ReactDOM.render(, document.getElementById(“wrapper”));

2

Have you linked bootstrap to your codepen?

3

Link to your Codepen so we can see what you have.

class should be className in JSX/React.

I would suggest using StackBlitz or CodeSandbox for React.

4

Here is the link to my codepen.

5

This is the link I used. rel=“stylesheet”
href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”
/>

6

I’m new in the field so not familiar with most of this things. Do you mind telling me how they work ?

7

  • You are using some super old versions of React. Go to Settings > JS and remove them (click the x next to them). Now, search for React and React-dom in the search box found in the JS section. Add the new versions and make sure the order is correct, React should come before React-dom in the list.

  • You have added jQuery-UI which needs jQuery itself, but you do not seem to be using it so I would just remove it.

  • ReactBootstrap is a component library not just Bootstrap styles for React. If you do not plan on using it as a component library remove it and just add the normal Bootstrap styles under the CSS section in the settings.

  • Again, the attribute class should not be used with React/JSX. Rename all the class attributes to className

  • The link you posted is not to Bootstrap, it is Font Awesome.

I know this might be a lot, but I would suggest you try to fix it yourself first.

However, if you need it, I have made a fork of your project with the corrections. You can click the fork button in the footer to make a copy.

1 Like
8

Waw, thanks for taking out time to go through my work. It’s a lot but I’ll make the correction one after the other. Thanks again.

1 Like
9

I’m also trying to make the page background color to be the one changing not the “quote-box” but this too has been difficult for me. Any hint please ?

10

Did you copy this code from somewhere? Because that is what it seems like.

What I would suggest you do is take some time to learn React properly. Forget about passing the challenge for now as that isn’t important. What is important, is that you learn and understand the technologies you use.

After you have learned React a bit better you can do this project on your own in an hour or two (or less). And you will be able to code the other projects as well. It will be much more fruitful than just passing this challenge (using what I have to assume is copied code).

Here is a YouTube React Course and its accompanying scrimba (scrimba lets you follow along in an interactive environment)

For the color, if you really want it to change it you can add some inline styles to the body inside the render function. You have to remove the styles on the wrapper and quote-box elements.

document.querySelector('body').style.backgroundColor = color;

But what is more likely supposed to happen is that the wrapper should be full height and width of the viewport so it covers all of the page.

I was going to comment on the code you have and try to explain why it’s odd but I don’t think it will be helpful to you until you understand React better.

Code comments (read if you'd like)

The React code is odd. For example, it sets the quote on the value attribute of the button. It is also making a meaningless state change causing a re-render which makes the code at the top of the render function re-run. The value the handler sets can be anything, like an empty string, and it would still work as it does now. I would expect to see the handler function contain some logic for the state change to the quote and color.

You are passing props to the QuotesComponent in ReactDOM.render that isn’t needed.

The code is using SCSS but you didn’t change the CSS to use a CSS Preprocessor (CSS settings on Codepen).

You have two elements with a #wrapper id which you shouldn’t have as ids should be unique.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.