Can't pull information from an object in react

My code so far is

import './styles.scss';
import React from 'react';
import ReactDOM from 'react-dom';

class Quote extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        quote = bank.quotes[1]
        return (
            <div>
                {quote}
            </div>
        )
    }
}
const bank = [
        {"quote": "I hear the jury's still out on science", "char":"Gob"}, 
        {"quote": "Why should you go to jail for a crime someone else noticed? You don’t need double talk, you need Bob Loblaw.", "char":"Bob Loblaw"},
        {"quote": "Steve Holt!", "char":"Steve Holt"},
        {"quote": "Do you think I could have a hit of the juice box?", "char": "Buster"},
        {"quote": "I don't care for Gob", "char": "Lucille"},
]


const rootDiv = document.getElementById('root');

ReactDOM.render(<Quote />, rootDiv);

I’m trying to pull quotes from within the bank object, and I’ve tried several different methods, but none of them seem to work. Where should I be storing my array with quotes in it and how would I properly pull from it?

Try putting your bank array inside render above where you are pulling it from. Also you need to fix your syntax. There is no such thing as quotes. You need to access the first item in the array then access quote so it would look more like

bank[0].quote

1 Like
  1. If you move the bank before the class it should work, or add it to the state instead.

  2. You need to declare the quote variable.

const quote = bank[0].quote

1 Like

Thanks @lasjorg and @shimphillip, these were both the problems. It’s running as intended now.