ReactJS-为什么我的嵌套元素没有呈现？

我正在尝试从我的

应用程序
组件中呈现嵌套组件
friendPanel
。它正在编译，但在加载时，没有显示friendPanel的数组。我是新手，所以请容忍我。如何从应用程序组件中呈现friendPanel

我的代码的相关部分如下：

class friendPanel extends Component {
  render(props) {
    return (
      <ul>
        {props.friends.map( friend =>
          <li key={friend.id}>{friend.name}</li>
        )}
      </ul>
    );
  }
}

class App extends Component {
  state = { 
    name: 'Bob McBobberson',
    friendList: [
      {id: 1, name: "Sandra"}, 
      {id: 2, name: "Tammy"}, 
      {id: 3, name: "Fernando"}
    ],
  }

  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Welcome {this.state.name}</h1>
          </header>
          <friendPanel friends={this.state.friendList} />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

类friendPanel扩展组件{
渲染（道具）{
返回(

{props.friends.map（friends=>
{friend.name}
)}

);
}
}
类应用程序扩展组件{
状态={
姓名：“鲍勃·麦克博伯森”，
友人名单：[
{id:1，名字：“桑德拉”}，
{id:2，名字：“塔米”}，
{id:3，姓名：“费尔南多”}
],
}
render（）{
返回(
欢迎{this.state.name}
);
}
}
导出默认应用程序；

提前感谢您的帮助
 您应该大写
FriendPanel
，否则React会将其视为普通的旧HTML

请参阅：
尝试以下操作：

class FriendPanel扩展组件{//已修复-组件名称应以大写字母开头
render（）{//删除了不必要的props参数
返回(

{this.props.friends.map（friend=>//已修复-在ReactJS中，这是我们从props获取数据的方式
{friend.name}
)}

);
}
}
类应用程序扩展组件{
状态={
姓名：“鲍勃·麦克博伯森”，
友人名单：[
{id:1，名字：“桑德拉”}，
{id:2，名字：“塔米”}，
{id:3，姓名：“费尔南多”}
],
}
render（）{
返回(
欢迎{this.state.name}
//修正-在JSX中，自定义元素必须以大写字母开头，否则编译器会将其视为常规html标记
);
}
}
也许可以试试这个。道具而不是道具。。。我还没看到你这么做。没有意识到这一点，我觉得很傻。非常感谢。这是非常有帮助的，我的代码现在正在按预期工作，谢谢！！