Estoy trabajando con un arreglo de frases y en la clase App
tengo en componentDidMount
el setState
y todo eso pero mi funcion selectQuoteIndex
me devuelve undefined.
En quotesData.js tengo un arreglo de objetos con dos propiedades una es quote y la otra author, luego en ese mismo archivo tengo un metodo getQuotes
que me devuelve el arreglo de quotes.
import React, { Component } from 'react';
import { random } from 'lodash';
import { getQuotes } from './services/quotesData';
import Button from './components/button';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
quotes: [],
selectedQuoteIndex: null
}
this.selectQuoteIndex = this.selectQuoteIndex.bind(this);
}
componentDidMount() {
this.setState({ quotes: getQuotes(), selectedQuoteIndex: this.selectQuoteIndex() })
}
selectQuoteIndex() {
if(!this.state.quotes.length) {
return;
}
return random(0, this.state.quotes.length - 1);
}
render() {
console.log(this.state.selecetedQuoteIndex);
return (
<div className="App" id = "quote-box">
<Button buttonDisplayName = "Next Quote" clickHandler = {this.selectQuoteIndex} />
</div>
);
}
}
export default App;