Mapping components with variable props not rendering from JSX to DOM, React

Question

I'm trying to map over an array in an object "MetaPrincipleTitles" that I defined in the render statement of the parent component. I'm passing props from the object "MetaPrincipleTitles" to the components I want to create, I want to create a new instance of these components every time I add a prop to the "MetaPrincipleTitles" object and I later want that component to render as JSX to the browser with the text of the corresponding element in the array of the object "MetaPrincipleTitles".

Parent component:

    import React, { Component, Fragment } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";

export default class Principles extends Component {
  constructor(props) {
    super(props);
    this.props = {
      metaPrincipleTitle: null
    };
  }

  render() {
    const MetaPrincipleTitles = {
      IMPT: [
        // Intellectual Meta-Principle Titles
        "Learn, Grow, Evolve. Be Anti-Fragile",
        "Boost odds of success through de-centralized principle-guided 
decision-making",
        "Accrue power"
      ],

  RMPT: [
    // Relationship Meta-Principle Titles
    "Communicate well",
    "Choose economically",
    "Connect with people spiritually"
  ],
  PMPT: [
    // Physical Meta-Principle Titles
    "Eat well",
    "Make decisions on the meta-level of your body",
    "Build strength",
    "Build muscle",
    "Prevent injuries",
    "Stay Healthy"
  ],

  SMPT: [
    // Spiritual Meta-Principle Titles
    "LGE biochemistry",
    "Boost Love & Reduce Suffering",
    "Relax/sleep",
    "Practice Meta-cognition"
  ]
};

// map over array of titles of metaPrinciples

return (
  <Fragment>
    <AoLDescription
      AoL="Intellectual"
      description="Intellectual Principles are pragmatic principles for understanding and influencing complex systems of reality.
      All of the principles in this Area of Life relate to the mechanisms by which we can change reality towards more Love & less Suffering. These include the top level (or Meta-) principles:"
    />

    {MetaPrincipleTitles.IMPT.map(elm => {
      return (
        <MetaPrinciple
          title={MetaPrincipleTitles.IMPT[elm]}
          displayOnlyTitle={true}
        />
      );
    })}

    <AoLDescription
      AoL="Relationships"
      description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    {MetaPrincipleTitles.RMPT.map(elm => {
      return (
        <MetaPrinciple
          title={MetaPrincipleTitles.RMPT[elm]}
          displayOnlyTitle={true}
        />
      );
    })}

    <AoLDescription
      AoL="Physical"
      description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
    <AoLDescription
      AoL="Spiritual"
      description="LOREMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM"
    />
  </Fragment>
);
  }
}

// What I want is for the titles of the meta-principles to be inserted into 
a bullet list below the description of the AoL

& Child component: (one produced for every element in array of object in render of parent)

import React, { Component, Fragment } from "react";
import propTypes from "prop-types";

export default class MetaPrinciple extends Component {
  render() {
    if (this.props.displayOnlyTitle) {
      return <h1>{this.props.title}</h1>;
    }

return (
  <Fragment>
    <h1>{this.props.title}</h1>
    <h2>This is not only displaying title. OBESERVEEEEE</h2>
  </Fragment>
);
  }
}

MetaPrinciple.propTypes = {
  title: propTypes.string.isRequired,
  displayOnlyTitle: propTypes.bool
};

But for some reason I'm not having any new elements (titles coming from object with arrays of title elms) rendering, I can't seem to figure this out, thanks for the help!!

Answer 1

The error is inside the map function. elm is already the element you want, the value of MetaPrincipleTitles.IMPT[elm] is undefined

{MetaPrincipleTitles.IMPT.map(elm => {
      return (
        <MetaPrinciple
          title={elm}
          displayOnlyTitle={true}
        />
      );
    })}