CODEWITHSUNDEEP
javascriptarraysreactjsonclickreact-props
Jevon Cochran
Jevon Cochran

Reputation: 1774

rendering data from an array of objects using an onclick

I'm trying to build a Flashcard app with React to help retain programming concepts. However, I'm running into trouble building out the components. I have a component called Definition that I want to display a random definition/explanation of a concept being pulled from an array of data in the following manner: App renders FlashCard, FlashCard renders Definition.

I've included a button with an onClick on the App component to do this. However, whenever, I click that button, I'm getting an error that says the data is undefined. What am I doing wrong?

error I'm getting

export const conceptArray = [
    { term: 'Redux', definition: 'A predictable state container for Javascript apps. This makes it easier to manage state' },
    { term: 'thunk', definition: 'A subroutine used to inject an additional calculation into another subroutine, primarily used to delay a calculation until result is needed' },
    { term: 'context API', definition: 'Provides a way to pass and store data down a React component tree without writing it into every level of the component hierarchy. It does so by leveraging Provider and Consumer components' },
    { term: 'reducer pattern', definition: 'A pure function that takes in previous state and action and returns next state' },
    { term: 'prop drilling', definition: 'Passing down props from upper level to lower level components in the component tree, where components in between have no use for these props' },
    { term: 'props', definition: 'Data or information passed to child components from parents' },
    { term: 'state', definition: 'Data being managed within a Component'},
  ];

// data and components
import { conceptArray } from "./data";
import FlashCard from "./components/FlashCard";

function App() {
  const [randomDef, setRandomDef] = useState('a bunch of shit I don\'t understand');

  // this should store the individual concept (individual items in the concept Array)
  const getCard = () => {setRandomDef(conceptArray[Math.floor(Math.random) * conceptArray.length].definition)};

  console.log(randomDef);
  console.log(conceptArray);
  console.log(conceptArray.length);
  console.log(conceptArray[0].definition);
  console.log(conceptArray[0].term);

  return (
    <div className="App">
      <header className="App-header">
        <FlashCard randomDef={randomDef} />
        <button onClick={getCard}>Get FlashCard</button>
      </header>
    </div>
  );
}

export default App;

// components
import Definition from "./Definition";

const FlashCard = props => {
    return (
        <div>
            <Definition randomDef={props.randomDef} />
        </div>
    )
}

export default FlashCard;

import React from "react";

const Definition = props => {
    return (
        <div>
            <p>{props.randomDef}</p>
        </div>
    )
}

export default Definition;

Upvotes: 1

Views: 49

Answers (1)

kind user
kind user

Reputation: 41893

First of all Math.random is a function - you have to call it. Secondly - you should multiply the result of Math.random by array length - else it will always equal to 0.

conceptArray[Math.floor(Math.random() * conceptArray.length)]

Upvotes: 1

Related Questions