title: why react props are passed undefined to the child component?
body: <p>I have get some data from db , when I console log them it works nice. 
  and also when I stringfy the passed props are OK and displayed on the screen as they are expected.</p>
  
  <pre><code>import axios from 'axios'
  import { URL } from '../../../../config'
  import Header from './header'
  
  class NewArticle extends Component {
      state = {
          article: [],
          team: []
      }
      componentWillMount() {
          axios.get(`${ URL }/articles?id=${ this.props.match.params.id }`)
          .then( res =&gt; {
              let article = res.data[ 0 ]
              console.log( res.data[ 0 ] )
              //{
                  //     author: "John Secada",
                  //     date: "10/12/2018",
              // }           
              axios.get( `${ URL }/teams?id=${ article.team }` )
              .then( res =&gt; {
                  this.setState({
                      article,
                      team: res.data[0]
                  })
                  console.log( res.data[0] )
                  // {
                  //     id: 3,
                  //     logo: "nets.png",
                  //     name: "Nets",
                  //     poll: "false",
                  //     stats: {wins: 23, defeats: 12}
                  // }
              } )
          } )
      }
      render(){
          let article = this.state.article
          let team = this.state.team
          return(
              &lt;div&gt;
                   &lt;Header
                      teamData={ team }
                      date={ article.date }
                      author={ article.author }
                      /&gt;
                  { JSON.stringify(article,team) }
              &lt;/div&gt;
          )
      }
  }
  export default NewArticle
  </code></pre>
  
  <p>the Header component which recieves the props:</p>
  
  <pre><code>import React from 'react'
  const Header = props =&gt; {
      return (
          &lt;div&gt;    
              { console.log( props) }
              {/* {teamData: Array(0), date: undefined, author: undefined} */}    
          &lt;/div&gt;
      )
  }
  export default Header 
  </code></pre>
  
  <p>So why they are undefined, when I pass them as props to a Header component?</p>