Build a Random Quote Machine help

Build a Random Quote Machine help
0

#1

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