Hey! i am trying to randomize the background of the app but the background is white,not changing,please help
Here is my App.js
code
`import React, { Component } from 'react';
import logo from './logo.svg';
import './App.scss';
import QuoteBox from './components/quotebox.js';
import { bg } from './list.js';
let ran1 = parseInt(Math.random() * 10);
let bgvar = bg[ran1];
class App extends Component {
render() {
return (
<div className="App" style={{ bgvar }}>
<QuoteBox />
</div>
);
}
}
export default App;
Here is my Component QuoteBox.js
import React, { Component } from 'react';
let data = require('../quotes.json');
class QuoteBox extends Component {
constructor(props) {
super(props);
this.state = {
quotes: [ ...data ],
ran: parseInt(Math.random() * 10)
};
this.newQuote = this.newQuote.bind(this);
}
newQuote() {
this.setState({
ran: parseInt(Math.random() * 10)
});
console.log('Working');
}
retFunc() {
return this.state.ran;
}
render() {
return (
<div id="quote-box">
<div id="text-and-author">
<h2 id="text">{this.state.quotes[this.state.ran].quote}</h2>
<p id="author">{this.state.quotes[this.state.ran].author}</p>
</div>
<div id="buttons">
<a id="new-quote" onClick={this.newQuote} href="#">
New quote
</a>
<a
href="https://twitter.com/share?ref_src=twsrc%5Etfw"
class="twitter-share-button"
id="tweet-quote"
data-show-count="false"
>
Tweet Quote
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
</div>
</div>
);
}
}
export default QuoteBox;`
This is the array of background property in list.js
export let bg = [ 0, "background : url('../bg1.jpg')", "background : url('../bg2.jpg')", "background : url('../bg3.jpg')", "background : url('../bg4.jpg')", "background : url('../bg5.jpg')", "background : url('../bg6.jpg')", "background : url('../bg7.jpg')", "background : url('../bg8.jpg')", "background : url('../bg9.jpg')", "background : url('../bg10.jpg')" ];
Your code so far
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine