Random Quote - React

JavaScript
1

Hi Everyone!

I’m starting with the Frontend Projects and the first one is the random quote machine.
I managed to get a new random quote and background color when I click the button, but sometimes I get a strange message saying this:

TypeError: quoteArr[numRan] is undefined


getRan

C:/Users/ezzep/Documents/React/Demo/myapp/src/components/App.js:73


   70 | document.body.style.background = colorArr[ranCol];  
   71 |   
   72 | this.setState({
>  73 | 	quote: quoteArr[numRan].quote,     
^  74 | 	name: quoteArr[numRan].name,  
   75 | 	color: colorArr[ranCol]  
   76 | })

this is inside my getRan method which is called when I click the “new quote” button.

getRan calls a function getRandom() and saves the number in numRan which is then used to access a random element from the quotes Array
quoteArr[numRan] like that.

the problem is that this button works most of the time. After a few tries, that error appears.

Any suggestions?

full code for App.js here:

const colorArr = [
"rgba(165, 139, 124, 1)",
"rgba(199, 102, 4, 1)",
"rgba(255, 255, 255, 1)",
"rgba(255, 241, 137, 1)",
"rgba(183, 183, 183, 1)",
"rgba(154, 206, 201, 1)",
"rgba(237, 106, 90, 1)",
"rgba(244, 241, 187, 1)",
"rgba(230, 235, 224, 1)",
"rgba(54, 201, 198, 1)",
"rgba(154, 206, 201, 1)",
"rgba(187, 190, 100, 1)",
"rgba(142, 85, 114, 1)",
"rgba(242, 247, 242, 1)",
"rgba(68, 56, 80, 1)"
];

const quoteArr = [
{
	quote: "una frase",
	name: "John"
},
{
	quote: "dos frase",
	name: "Carl"
},
{
	quote: "tres frase",
	name: "Dan"
}
];

const numRan = getRandom();

const ranCol = getColor();

document.body.style.background = ranCol;



function getRandom(){
	return Math.round(Math.random()*quoteArr.length)
}
 
function getColor(){
	return Math.round(Math.random()*colorArr.length)
}

class App extends React.Component {
	constructor(){
		super();
		this.state = {
			quote: quoteArr[numRan].quote,
			name: quoteArr[numRan].name,
			color: colorArr[ranCol]
		}
	this.getRan = this.getRan.bind(this);
	}



getRan(){
	const numRan = getRandom();
	const ranCol = getColor();

	document.body.style.background = colorArr[ranCol];

	this.setState({
		quote: quoteArr[numRan].quote,
		name: quoteArr[numRan].name,
		color: colorArr[ranCol]
	})
	
	
}


	render(){

		return (
		<div style={{color:ranCol}} id="quote-box">
			<div>
			<Frase quote={this.state.quote} name={this.state.name} />
			</div>
		
		<button onClick={this.getRan} style={{background:this.state.color,color:"white"}}>Generar</button>
		</div>
		)
	}
	
}
2

Try to change to Math.floor() and see if this happens again :wink:

1 Like
3

WOW! thank you so much!

4

My quote array isn’t finished yet.
I ran the tests and passed all except the last one due to a Timeout of 15000ms exceeded.

how can I avoid the timeout?

everything else seems to be working fine.

const colorArr = [
"rgba(165, 139, 124, 1)",
"rgba(199, 102, 4, 1)",
"rgba(183, 183, 183, 1)",
"rgba(154, 206, 201, 1)",
"rgba(237, 106, 90, 1)",
"rgba(244, 241, 187, 1)",
"rgba(54, 201, 198, 1)",
"rgba(154, 206, 201, 1)",
"rgba(187, 190, 100, 1)",
"rgba(142, 85, 114, 1)",
"rgba(68, 56, 80, 1)"
];

const quoteArr = [
{
	quote: "una frase",
	name: "John"
},
{
	quote: "dos frase",
	name: "Carl"
},
{
	quote: "tres frase",
	name: "Dan"
}
];

const numRan = getRandom();

const ranCol = getColor();

document.body.style.background = colorArr[ranCol];

function getRandom(){
	return Math.floor(Math.random()*quoteArr.length)
}
 
function getColor(){
	return Math.floor(Math.random()*colorArr.length)
}

class App extends React.Component {
	constructor(){
		super();
		this.state = {
			quote: quoteArr[numRan].quote,
			name: quoteArr[numRan].name,
			color: colorArr[ranCol]
		}
	this.getRan = this.getRan.bind(this);
	}



getRan(){
	const numRan = getRandom();
	const ranCol = getColor();

	document.body.style.background = colorArr[ranCol];

	this.setState({
		quote: quoteArr[numRan].quote,
		name: quoteArr[numRan].name,
		color: colorArr[ranCol]
	})
}

	render(){

		return (
		<div style={{color:this.state.color}} id="quote-box">
			<div>
			<Frase quote={this.state.quote} name={this.state.name} />
			</div>
		<Twitter bgColor={this.state.color} quote={this.state.quote} author={this.state.name}/>
		<button id="new-quote" className="button" onClick={this.getRan} style={{width:"80px",background:this.state.color,color:"white"}}>Generar</button>
		</div>
		)
	}
	
}

class Frase extends React.Component {
	render(){

		return(
			<div>
				<h1 id="text">{this.props.quote}</h1>
				<h1 id="author">{this.props.name}</h1>
			</div>		
		)
	}

}


function Twitter(props){

	const url = "http://twitter.com/intent/tweet?hashtags=quotes&text=" + '"' + props.quote + '"' + " " + props.author;

	return(
	
		<a id="tweet-quote" className="button" style={{textDecoration:"none",color:"white",background:props.bgColor}} target="_blank" rel="noopener noreferrer" href={url}>
		<span className="fa fa-twitter"></span></a>
	)
}

ReactDOM.render(<App />,document.getElementById("root"));