如何访问 React 组件内部的数组？

Question

So, I am doing this short freecodecamp frontend project, where a random quote will generate and if you click "new quote" button, it will generate a random quote. So I have declared this random quote outside the react component,

const randomQuotes = [{"quote": "Life isn’t about getting and having, it’s about giving and being.", "author": "Kevin Kruse"},
{"quote": "Whatever the mind of man can conceive and believe, it can achieve.", "author": "Napoleon Hill"}]

And my react component is

class MyComponent extends React.Component{
  constructor(props){
    super(props)
    this.state = {   //this is just an example
      quote:'wow', 
      author:'wow2'
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick(){
    this.setState({
      quote:'you clicked',
      author:'new one'
    })
  }
  render(){
    return(
      <div id="quote-box">
    <div id='text'>
      <h1 class='text-center'>{this.state.quote}</h1> //randomly generated quote will be shown here
    </div>
    <div id='author'>
      <h1 class='text-center'>{this.state.author}</h1>  //the author of the randomly generated quote will be shown here
    </div>
    <div class='row'>
      <div class='col-xs-4'>
        <button id="new-quote" class='btn btn-primary btn-block' onClick={this.handleClick}>New Quote</button>
           </div>
       <div class='col-xs-6'>
         <a id='tweet-quote' href='twitter.com/intent/tweet'>tweet</a>
      </div>
    
    </div>
   
  </div>
    )
  }
}
ReactDOM.render(<MyComponent/>, document.getElementById('quote-box'));

My question is, how to access the array which has been globally declared? should I create a new child component and pass this array as props? or is there any other way to do this?

Answer 1

This array seems to be static so you can just export it like the following...

randomQuotes.js

export const randomQuotes = [{"quote": "Life isn’t about getting and having, it’s about giving and being.", "author": "Kevin Kruse"},
{"quote": "Whatever the mind of man can conceive and believe, it can achieve.", "author": "Napoleon Hill"}]

...and then import it in your component file:

MyComponent.js

import { randomQuotes } from 'path/to/randomQuotes.js'

class MyComponent extends React.Component{
   ...