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
– jscul, Commented Oct 9, 2018 at 2:18

Daniel A. White · Accepted Answer · 2018-10-09 02:14:33Z

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 9, 2018 at 2:14

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marhami Over a year ago

feeling very silly for not having realized this. Thank you!

Tu Nguyen · Accepted Answer · 2018-10-09 02:17:20Z

0

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>
    );
  }
}

answered Oct 9, 2018 at 2:17

Tu Nguyen

10.2k4 gold badges30 silver badges53 bronze badges

1 Comment

marhami Over a year ago

this was extremely helpful, my code is working as expected now, thank you!!

Collectives™ on Stack Overflow

ReactJS - why is my nested element not rendering?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related