Random Quote Machine - Everything is done, but I have some questions

I have passed all the tests for the ‘Build a Random Quote Machine Challenge.’ I still have yet to style it, but I want the JS to work first. Here is a link to my codepen project: https://codepen.io/critchey/pen/wvrLGdM

There have been two issues:

  1. I was in the process of adding real quotes, instead of placeholders, and noticed that each time I add a quote over a small character limit it no longer renders to the screen. In an attempt to troubleshoot I added some jarring colors to see if the element’s container size was too small. That, nor padding or margin size were the culprit.
  2. Initially, I wrote out all of the HTML elements with their ids required to pass the test within the JXS, which is within a Redux React Component. Whenever code was tested it didn’t pass any of the tests that require ids or hrefs within certain elements. In order to pass I created duplicated HTML elements within the HTML area in codepen. Does the test not allow for JXS, because it doesn’t seem to register that it is there? Am I missing something?

My HTML:

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
/>
<div id='quote-box'>
  <p id='text'/>
   <p id='author'/>
   <button id='new-quote'/>
   <a id='tweet-quote' href='twitter.com/intent/tweet' target="_blank"/>
</div>

My CSS:

#quote-box {
  width: 100%;
  height: 100%;
  background-color:blue;
  padding:0;
  margin:0;
}
#text {
  background-color:red;
  padding:0;
  margin:0;
}

My JavaScript

//Redux:_________________________________________
//Actions
const CHANGE = 'CHANGE';
const changeQuote = () => {
  return {
    type: CHANGE
  }
};

//Quote Data
const quotesArr = [
  {quote: 'Test1', author: 'CJR'},
  {quote: 'Test2', author: 'CJR'},
  {quote: 'Test3', author: 'CJR'},
  {quote: 'Test4', author: 'CJR'},
  {quote: 'Test5', author: 'CJR'},
];

//Reducer
const quoteReducer = (state = quotesArr[0], action) => {
  switch (action.type) {
    case CHANGE:
      return quotesArr[Math.floor(Math.random() * state.quote.length)];
    default:
      return quotesArr[Math.floor(Math.random() * state.quote.length)];
  }
};

//Redux Store Declaration
const store = Redux.createStore(quoteReducer);


//React:__________________________________________
//Declarations for easy Redux-React
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

//React Components
class quoteCycler extends React.Component {
  constructor(props) {
    super(props);
    this.changeButton = this.changeButton.bind(this);
  }
  changeButton() {
    this.props.getNewQuote(this.state);
  };
  render() {
    return (
      <div>
        <h1>Find a New Inspirational Quote</h1>
        <p id='text'>Quote:{this.props.currentQuote}</p>
        <p id='author'>-{this.props.currentAuthor}</p>
        <button id='new-quote' onClick={this.changeButton}>New Quote</button><br/>
        <a id='tweet-quote' href='twitter.com/intent/tweet' target="_blank"><i class='fa fa-twitter'/></a>
      </div>
    );
  }
};

//Redux-React Mapping & Wrapping
const mapStateToProps = (state) => {
  return {
    currentQuote: state.quote,
    currentAuthor: state.author
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    getNewQuote: () => {
      dispatch(changeQuote())
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(quoteCycler);
  
class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
  }
};

//Render React
ReactDOM.render(
  <AppWrapper/>, document.getElementById('quote-box')
);

Browser Info:
User Agent is: Chrome/97.0.4692.71 (Official Build) (64-bit)

Challenge:
Build a Random Quote Machine

Link to the challenge:

Hey!

  1. The problem here is that in order to get your random quote you wrote Math.random() * state.quote.length. And what this is doing is to get the length of your quote (the length of the string that you are passing) to randomize a number, and this breaks your code when you put a quote that is larger than the other because you will randomize a number bigger than the number of quotes you have. So what you should be aiming to get was the length of your array, something like this: Math.random()*quotesArr.length, which get the a random number out of your total quotes. This seems to solve the first problem.

  2. And you can pass your tests using JSX, since the JSX turns into a regular html tag, i wrote all my code using react/redux. But you can’t put JSX in the html part, there you should put normal html tags, and use one to render all your app.

You can check my pen here to see how I manage the JSX tags and make the ids work.
my random-quote machine
I hope I have helped, good luck! :smiley:

EDIT: fix some typos and improve the explanation

Hey,

Thank you for your help. There were a few times I changed the quotesArr variable’s name to make the code easier to understand. I completely forgot to change the reference. Initially, I was going to have the entire array of quotes within the default state. I can’t believe I missed that.

Also, I figured out the biggest problem with passing the test is that I didn’t add the React-Redux frameworks with Babel on the test template. The simple things always seem to get me. I will just create my pens with the template in the first place from now on. Thank you for your help!
I have a new pen link now: https://codepen.io/critchey/pen/ExwBMjG

Oh, of course. These errors are hard to spot in our own projects. And I forget to mention this possibility of errors caused by the missing library framework that we have to add to the template, I did the same thing and it took me some time figuring out what was wrong. But I’m glad you find the solution on your own!
Now you just have to style your app, have fun!