ReactJS - why is my nested element not rendering?

Question

I'm trying to render a nested component friendPanel from within my App component. It is compiling but upon loading, is not showing the friendPanel's array. I'm a reactJS newbie, so please bear with me. How should I render the friendPanel from within the App component?

The relevant parts of my code are below:

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;

Thank you in advance for any help!

Maybe try this.props instead of props... I haven’t seen it done your way. — jscul, Oct 09 '18 at 02:18

score 1 · Answer 1 · answered Oct 09 '18 at 02:14

1

You should capitalize FriendPanel or React will treat it as plain old HTML.

See: ReactJS component names must begin with capital letters?

answered Oct 09 '18 at 02:14

Daniel A. White

187,200
47
362
445

feeling very silly for not having realized this. Thank you! – marhami Oct 09 '18 at 02:32

score 0 · Accepted Answer · answered Oct 09 '18 at 02:17

Try this:

class FriendPanel extends Component {   //fixed - Component name should start with an upper-case letter
  render() {   // removed the unnecessary props parameter
    return (
      <ul>
        {this.props.friends.map( friend =>  //fixed - in ReactJS, this is the way we get data from props
          <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} />   //fixed -  in JSX, the custom element must start with an upper-case or the compiler will treat this as regular html tag
        </div>
      </MuiThemeProvider>
    );
  }
}

this was extremely helpful, my code is working as expected now, thank you!! — marhami, Oct 09 '18 at 02:32

ReactJS - why is my nested element not rendering?

2 Answers2