Random quote machine project react

[Borhen]

i want to use function to get a random quote from the api but this function failed to import a quote and this is my code please help me to fix it :

function getQuote() {
   return fetch('https://type.fit/api/quotes').then(response=> {
   return response.json()
  }).then(jsonResponse=> {
    if(!jsonResponse.length) {
     return []
    }
    return jsonResponse[Math.floor(Math.random() * jsonResponse.length)];
  })
}
export  const textQuote = getQuote().text;
export  const authorQuote = getQuote().author;

and when i export and import the textQuote and authorQuote variables from the randomQuote.js file to app.js file there’s an error appear :
./src/Components/App/App.js
Attempted import error: ‘authorQuote’ is not exported from ‘…/…/RandomQuote/RandomQuote’.

https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

[kevinSmith]

I have some questions about your implementation.

First of all, does your function getQuote return an object or an array? This (return []) returns and array and this (return jsonResponse[Math...) returns an object.

Also, this:

export  const textQuote = getQuote().text;
export  const authorQuote = getQuote().author;

is going to get a text from one random entry and get an author for a different random entry. You are generating a different random number for each.

Also, I don’t think exporting those two values is going to get the result you want. That is going to calculate each of those at the beginning at export those. Furthermore, as near as I can tell, since there is no await or Promise handling, those are just going to evaluate to a Promise?

---

What I would expect is for the getQuote function to be exported and consumed where it is needed (and only called once for each quote). I would expect that Promise to be handled, either by handling it directly or dealing with it with an async/await.

As to why it is not importing/exporting properly, I don’t see anything that jumps out at me as wrong. I’d have to see your setup to tell. Do you have a repo for this?

[Borhen]

ok my friend that’s my all files project :
this is the text.js file :

import React from "react";
import './Text.css';

class Text extends React.Component {
   render(){
   	return (
   		<div id="text" >
   		<h2>This is your quote text</h2>
   		<p>{this.props.text}</p>
   		</div>
   	)
   }
}

export default Text; 

this is the App.js file :

import './App.css';
import Text from '../Text/Text';
import {textQuote, authorQuote} from '../../RandomQuote/RandomQuote';


class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: textQuote,
      author: authorQuote
    }
  }
  render() {
    return (
        <div id="quote-box" >
        <h1> My quote</h1>
          <Text text={this.state.text} />
        {/* <Author />*/}
      {/*<Button />*/}
      <a href="https://twitter.com/intent/tweet">Tweet</a>
        </div>
    )
  }
}

export default App;

this is the index.js file :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App/App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[kevinSmith]

import {textQuote, authorQuote} from '../../RandomQuote/RandomQuote';

Wait, what? Where is your RandomQuote folder relative to your App folder? Is is a sibling of “components”?

Can you export anything from that file? Maybe comment out the other stuff and just try:

export const foo = 'bar';

and see if you can import that.

[Borhen]

Mr Kevin this is

[kevinSmith]

It doesn’t look like you gave RandomQuote a file time. I think import assumes “.js”.

[Borhen]

RandomQuote folder is in the global folder “src” and “app.js” is within the sub folder of the src in the “Components/App” folder

[kevinSmith]

OK. That’s a little odd to me. I would expect that to either be in a “pages” folder (or something like that - I see “screens” sometimes) or in the “components” folder (not usually capitalized). Since your app is in the “components” folder I would think that conceptually you are putting all your components in there.

This isn’t carved in stone, it’s just what I’m used to seeing. It also shouldn’t cause this problem.

[Borhen]

yes all my components folder is in the “Components” folder dividing in two files js file and css file.
so i can’t make this getQuote function in seperate file?
it’s wrong ?

[kevinSmith]

“wrong” is too strong of a weird.

And I was a little confused - RandomQuote is not a component so it doesn’t belong there. Really, this is just a helper function. I might create a folder like “src/helpers” or “src/services”. In that case, the file name should probably be camelCase. If you were to turn it into a full module, I might create a module folder and PascalCase it, but I don’t think this needs to go that far.

And don’t worry about this too much. I’m just explaining why it looked odd to me. The casing on the filename made me think it was a React component.

WIth this size of app, these type of things don’t matter much. It’s not until you get into bigger apps that it will really matter, and you can figure out those issues when you get there. For now, just figure out a way to organize that keeps things neat and maintainable. My only caveat would be to be careful what you put in the src folder - only things that are universal to your all should go there. You basically have that - although I probably would have left index.js there. It just looks odd to me to have the RandomQuote folder there - what if you need 100 helper modules, will they all go there?

But in any case, don’t worry about it too much. I now kind of regret bringing it up - I don’t want you bike shedding about it.

[Borhen]

In your opinion i must create my randomQuote in the components folder

[kevinSmith]

No, that was when I was thinking that it was a component. It is one. Where to put it? Again, there is some subjectivity here, and this probably not something you need to worry about write now…

If you are only using it in App.js, then that is a valid place to put it. If I felt I needed to break it out into another file, I might make a file like src/components/App/App.helpers.js or something like that. I might also create a file like src/utils/quotes or src/services/quotes.

But again, I wouldn’t worry about this too much. Your PascalCasing confused me and I still think putting that folder directly on the src level is a mistake, but it’s not a terrible one considering how small this app is going to be. This is the kind of thing that people almost learn better by screwing it up and realizing the importance of organizational hierarchies. You are not there yet.

We’ve already spent way to much time talking about this. Don’t worry about it.

Did you get the initial issues you were having to work?