React.js随机名称生成器给出了未定义或无法编译的信息

Question

I'm sure I have something incorrect here, could use some help. I am trying to return a random name from my array called "names" however something I've written isn't working correctly.

What I'm trying to do is use getRandomName to randomly reach into the array and return a name. I always struggle with arrays and am using this exercise to get more familiar

My code in my parent is:

import React, { Component } from 'react';
import styled from 'styled-components';
import { ContainLeft } from '../../../helper/comps';
import Moment from 'react-moment';
import harry from '../../../../static/quotes-harry.jpg';
import { names, sayings } from './arrays';

const QuoteBox = styled.div`
  width: 500px;
  height: 250px;
  border: 1px solid white;
  background: black;
  display: flex;
`;

const QuoteHolder = styled.div`
  width: 250px;
  margin: 2em;
`;

const Quote = styled.p`
  color: white;
  width: 200px;
  font-size: 16px;
  font-weight: bold;
`;

const Author = styled.p`
  color: white;
  font-style: italic;
  font-size: 12px;
`;

const Image = styled.div`
  width: 150px;
  height: 200px;
  margin: 1em;
`;

class Container extends Component {
  constructor() {
    super();
    this.state = {};
  }
  getRandomName() {
    return names[Math.floor(Math.random() * (names.length - 1))];
  }
  render() {
    return (
      <ContainLeft
        style={{
          alignItems: 'center',
          position: 'absolute',
          width: '100%',
          margin: 0,
          marginTop: '5em',
          padding: 0,
          justifyContent: 'center'
        }}
      >
        <QuoteBox>
          <QuoteHolder>
            <Quote>"Lorem Ipsum Dolor Set Amet, Some other Words Quote"</Quote>
            <Author>{getRandomName}</Author>
          </QuoteHolder>
          <Image style={{ background: `url(${harry})` }} />
        </QuoteBox>

      </ContainLeft>
    );
  }
}
export default Container;

My child component holding the arrays I'll be using is:

const names = [
  {
    name: 'Yoda',
    id: 1
  },
  {
    name: 'Harry',
    id: 2
  },
  {
    name: 'Captain Kirk',
    id: 3
  },
  {
    name: 'Spock',
    id: 4
  },
  {
    name: 'Arnold',
    id: 5
  },
  {
    name: 'Gandalf',
    id: 6
  },
  {
    name: 'Magneto',
    id: 7
  },
  {
    name: 'Tony Stark',
    id: 8
  },
  {
    name: 'Bilbo',
    id: 9
  },
  {
    name: 'Obi Wan',
    id: 10
  }
];

const sayings = [
  {
    name: 'I find your lack of faith disturbing',
    id: 1
  },
  {
    name: 'Why, you stuck-up, half-witted, scruffy-looking nerf herder!',
    id: 2
  },
  {
    name: 'Do. Or do not. There is no try.',
    id: 3
  },
  {
    name: 'No. I am your father.',
    id: 4
  },
  {
    name: 'Now, young Skywalker, you will die.',
    id: 5
  },
  {
    name: 'I’m one with the Force. The Force is with me.',
    id: 6
  },
  {
    name: 'The force is strong with this one.',
    id: 7
  },
  {
    name: 'Use the force, Luke.',
    id: 8
  },
  {
    name: 'Judge me by my size, do you?',
    id: 9
  },
  {
    name: 'Fear is the path to the dark side.',
    id: 10
  }
];
export { names, sayings };

the error I get is:

./src/components/pages/projectpages/quotes/container.js Line 64: 'getRandomName' is not defined no-undef

Answer 1

You have to bind it in your constructor

constructor() {
    super();
    this.state = {};
    this.getRandomName = this.getRandomName.bind(this);
  }

Also you may import names array like this if you export it using default keyword,

import names from './arrays';

would solve the issue.