Nesting components in React, props not passing to child component

Question

I'm creating a list with React components, and am working on the list container and reusable list-item components. The parent most component passes information to middle component, but the child-most component does not have props values.

What am I doing wrong? No console errors.
middle component:

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return (
      // want to render list-item component
      <li key={video.etag}>{video.snippet.title}</li>
    )
  });
  return (
    <ul className="list-group">
    {videoItems}
      <ListItem
        videos={ videoItems }
      />
    </ul>
  )
}

a console log in child-most component shows no props

Answer 1

I think it will be better if you pass props directly into the children component. Try this:

const VideoList = (props) => {
  const videoItems = props.videos.map((video) => {
    return (
      // want to render list-item component
      <ListItem key={video.etag} video={video} />
    )
  });
  return (
    <ul className="list-group">
      {videoItems}
    </ul>
  )
}

Inside your children component, you can display what you want

Answer 2

尝试使用“ this”关键字将属性传递给最子组件。

    <ListItem videos={this.videoItems}/>