title: In React.js array value is not passing properly via props?
body: <p>I have a react app that has two components one Customer and another called Tags. The Customer sends its state's tags value to Tags. As following:</p>
  
  <p>Customer.jsx</p>
  
  <pre><code>import React from "react";
  import Tags from "./Tags.jsx";
  
  export default class Customer extends React.Component {
    constructor(props) {
      super(props);
      this.state = {customer:''};
    }
    componentDidMount(){
      const url = `http://localhost:3000/api/customers/${this.props.params.id}`
      fetch(url)
        .then(res=&gt;res.json())
        .then(data=&gt;{
          console.log(data);
          this.setState({
            customer: data
          });
        })
        .catch(error=&gt;{
          console.log(error)
        });
    }
    render() {
      return (
        &lt;div&gt;
            Company Name :{this.state.customer.companyName}
            Customer Name :{this.state.customer.name}
            Tags: &lt;Tags tags={this.state.customer.tags} /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Tags.jsx</p>
  
  <pre><code>import React from "react";
  
  export default class Tags extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      let tags = this.props.tags.map(tag=&gt;{
        return (&lt;span&gt;tag&lt;/span&gt;);
      });
      return (
        &lt;div&gt;
          {tags}
        &lt;/div&gt;
       );
    }
  }
  </code></pre>
  
  <p>When I run the code I get, "TypeError: Cannot read property 'map' of undefined(…)". If I replace below from Tags.jsx</p>
  
  <pre><code>let tags = this.props.tags.map(tag=&gt;{
            return (&lt;span&gt;tag&lt;/span&gt;);
          });
  </code></pre>
  
  <p>with</p>
  
  <pre><code>console.log(this.props.tags);
  </code></pre>
  
  <p>The output is an array. 
  What is happening? I really do not understand. What can I do?</p>