Access what inside an element React-CodePudding

function Lesson1(props) {
    return (<div><Lesson name="Name of the lesson"></Lesson></div>)
}

So Lesson is not a child of Lesson1, and I don't know what to call it (so I can't do google search). In another component, I try to render [<Lesson1 />, <Lesson2 />] array. I want to use map to map from Lesson1 to Lesson name props. Don't know how to access it. Please help!


class HomePage extends React.Component {
  constructor(props){
    super(props);
    let lessons = [<Lesson1 key="1" />, <Lesson2 key="2" />];
    this.state = {lessons: lessons};
  }
render() { 
    return (
      <div className="homePage">
        <div className="lessonList">
          { this.state.lessons // here i want to render Lesson name of Lesson1 and Lesson2 instead of full Lesson1 and Lesson2
          }
        </div>
      </div>
    );
  }
}

CodePudding user response：

If you provide a prop called name to in each lesson you can access it like item.props.name.

import React from "react";

const Lesson1 = () => {
  return <div>aaa</div>;
};

const Lesson2 = () => {
  return <div>bbb</div>;
};

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    let lessons = [<Lesson1 name="Lesson1" />, <Lesson2 name="Lesson2" />];
    this.state = { lessons: lessons };
  }
  render() {
    return (
      <div className="homePage">
        <div className="lessonList">
          {
            this.state.lessons.map((item) => item.props.name) // here i want to render Lesson name of Lesson1 and Lesson2 instead of full Lesson1 and Lesson2
          }
        </div>
      </div>
    );
  }
}

export default HomePage;

Code Sandbox