Random Quote Machine Using React

index.html

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="root"></div>

random-quote-machine-using-react.markdown

Random Quote Machine Using React

A Pen by Pushp Vashisht on CodePen.

License.

script.babel

const quotes = ['Be yourself; everyone else is already taken.', 'Be the change that you wish to see in the world.', 'No one can make you feel inferior without your consent.', 'Darkness cannot drive out darkness: only light can do that. Hate cannot drive out hate: only love can do that.'];

const authors = ['Oscar Wilde', 'Mahatma Gandhi', 'Eleanor Roosevelt', 'Martin Luther King Jr.'];

let ind = 0;

class TweetQuote extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <a id="tweet-quote" href="twitter.com/intent/tweet">Tweet Quote</a>
    );
  }
};

class Text extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <p id="text">{quotes[this.props.ind]}</p>
    );
  }
};

class Author extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return (
      <p id="author">{authors[this.props.ind]}</p>
    );
  }
};

class QuoteBox extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      ind : 0
    };
    this.newQuote = this.newQuote.bind(this);
  }
  newQuote(){
    this.setState({
      ind : Math.floor(Math.random() * 4)  
    });
  }
  render(){
    return (
      <div id="quote-box">
        <Text ind={this.state.ind} />
        <Author ind={this.state.ind} />
        <a href="#" id="new-quote" onClick={this.newQuote}>New Quote</a><br />
        <TweetQuote />
      </div>
    );
  }
};

React.render(<QuoteBox />, document.getElementById('root'));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

style.css

#quote-box{
  margin: 0 auto;
  text-align: center;
  width: 80vw;
  border: ridge;
}