TypeError: this.props.user.hobbies.map is not a function

JavaScript
1 
class App extends Component {
  render() {
    var user = {
      name: "Ernest",
      hobbies: "coding"
    };
    return (
      <div className="App">
        <Header />
        <Body name={"Jamba"} age={34} user={user} />
        <Footer />
      </div>
    );
  }
}

export default App;




import React, { Component } from "react";

export default class body extends Component {
  render() {
    var text = "somthing";
    return (
      <div>
        <h1> At body</h1>
        <p>{text}</p>
        <p>
          {" "}
          Your name is {this.props.name}, your age is {this.props.age}
        </p>
        <p> User Object => Name: {this.props.user.name}</p>
        <div>
          <h4>Hobbies</h4>
          <ul>
            {this.props.user.hobbies.map(hobby => (
              <li>{hobby} </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

Two things,

  1. You have to pass props into the component body. If you are already doing that, good.
  2. Hobbies needs to be an Array for it to be enumerate i.e. map to work.

Here is the solution,

var user = {
    name: "Ernest",
    hobbies: ["coding", "dancing", "running"]
}

Earlier hobbies was a String, now an Array.