CODEWITHSUNDEEP
reactjs
marhami
marhami

Reputation: 11

ReactJS - why is my nested element not rendering?

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!

Upvotes: 1

Views: 79

Answers (2)

Tu Nguyen
Tu Nguyen

Reputation: 10189

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

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 191058

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

See: ReactJS component names must begin with capital letters?

Upvotes: 1

Related Questions