title: ReactJS Props Undefined
body: <p>I am learning how to use props. After taking research in either my mother language or english, I couldn't end up with a proper answer for my issue.
  Please tell me why this threw errors. This is the App.js file (default)</p>
  <pre><code>import React from 'react';
  import './App.css';
  import Product7 from './componentep7/Product7';
  
  function App() {
    return (
      &lt;div&gt;
      &lt;nav className=&quot;navbar navbar-inverse&quot;&gt;
        &lt;div className=&quot;container-fluid&quot;&gt;
          &lt;a className=&quot;navbar-brand&quot; &gt;Title&lt;/a&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div className=&quot;container&quot;&gt;
  &lt;div className=&quot;row&quot;&gt;
    &lt;div className=&quot;col-xs-12 col-sm-12 col-md-12 col-lg-12&quot;&gt;
  
  
    
      &lt;Product7 name=&quot;valiant&quot;/&gt;
  
      
  
    &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  export default App;
  
  </code></pre>
  <p>and this is the component file (Product7.js)
  everything is fine except it returned an error at {this.props.name}</p>
  <pre><code>import React from 'react';
  
  
  function Product7() {
    return (
      &lt;div&gt;
      &lt;div className=&quot;col-xs-5 col-sm-5 col-md-5 col-lg-5&quot;&gt;
        &lt;a className=&quot;thumbnail&quot;&gt;
          &lt;img src=&quot;https://yuzu-emu.org/images/game/boxart/hollow-knight.png&quot; alt=&quot;5tr&quot;/&gt;
        
        &lt;/a&gt;
        &lt;div className=&quot;caption&quot;&gt;
  
  &lt;h4&gt;{this.props.name}&lt;/h4&gt;
  
       
        &lt;a className=&quot;btn btn-primary&quot;&gt;Click to enter&lt;/a&gt;
  
        &lt;/div&gt;
        
            &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  
  export default Product7;
  </code></pre>
  <p>Thank you for helping me out.</p>