title: React - Prop is undefined in stateless function
body: <p>I am passing props from one stateless function to another, and I get a reference error saying the prop is undefined. Here is the parent function:</p>
  
  <pre><code>const Home = () =&gt; {
    return (
      &lt;App&gt;
        &lt;BackgroundImage url="mercedes-car.jpg"&gt;
          &lt;h1&gt;Test&lt;/h1&gt;
        &lt;/BackgroundImage&gt;
      &lt;/App&gt;
    )
  }
  </code></pre>
  
  <p>And here is the BackgroundImage function:</p>
  
  <pre><code>const Image = styled.div`
    background-image: ${props =&gt; url(props.imageUrl)};
    background-size: cover;
    height: 100%;
    width: 100%;
  `;
  
  const BackgroundImage = (props) =&gt; {
      console.log(props)
    return (
      &lt;Image imageUrl={ props.url }&gt;
        { props.children }
      &lt;/Image&gt;
    )
  }
  </code></pre>
  
  <p>The error is that url is undefined; however, when I console.log(props), I get an object with url and children. Any direction or explanation as to why this error is throwing would be appreciated!</p>