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)

import React from 'react';
import './App.css';
import Product7 from './ponentep7/Product7';

function App() {
  return (
    <div>
    <nav className="navbar navbar-inverse">
      <div className="container-fluid">
        <a className="navbar-brand" >Title</a>
      </div>
    </nav>
    <div className="container">
<div className="row">
  <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">


  
    <Product7 name="valiant"/>

    

  </div>
</div>

    </div>
    </div>
    )
}

export default App;

and this is the ponent file (Product7.js) everything is fine except it returned an error at {this.props.name}

import React from 'react';


function Product7() {
  return (
    <div>
    <div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
      <a className="thumbnail">
        <img src=".png" alt="5tr"/>
      
      </a>
      <div className="caption">

<h4>{this.props.name}</h4>

     
      <a className="btn btn-primary">Click to enter</a>

      </div>
      
          </div>
    </div>
    )
}

export default Product7;

Thank you for helping me out.

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)

import React from 'react';
import './App.css';
import Product7 from './ponentep7/Product7';

function App() {
  return (
    <div>
    <nav className="navbar navbar-inverse">
      <div className="container-fluid">
        <a className="navbar-brand" >Title</a>
      </div>
    </nav>
    <div className="container">
<div className="row">
  <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">


  
    <Product7 name="valiant"/>

    

  </div>
</div>

    </div>
    </div>
    )
}

export default App;

and this is the ponent file (Product7.js) everything is fine except it returned an error at {this.props.name}

import React from 'react';


function Product7() {
  return (
    <div>
    <div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
      <a className="thumbnail">
        <img src="https://yuzu-emu/images/game/boxart/hollow-knight.png" alt="5tr"/>
      
      </a>
      <div className="caption">

<h4>{this.props.name}</h4>

     
      <a className="btn btn-primary">Click to enter</a>

      </div>
      
          </div>
    </div>
    )
}

export default Product7;

Thank you for helping me out.

• javascript
• reactjs
• undefined
• react-props

• you can't use this in functional ponent. – Siju Samson Commented Jul 18, 2020 at 3:57

8 Answers 8

Props are passed as an argument to function ponents. You can’t reference this.props. Access it from the props argument:

function Product7 (props) {
  return (
    <h4>{props.name}</h4>
  )
}

don't use this in functional ponents, <h4>{props.name}</h4>

If you want to use the props in the ponent, you must define it as a parameter:

function Product7(props) {
...

You should pass props as an argument in your ponent.

function Product7(props){
    ...
}

You cant use this in functional ponent. Please go through this link.

    import React from 'react';
    
    
    function Product7({name}) {
      return (
        <div>
        <div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
          <a className="thumbnail">
            <img src="https://yuzu-emu/images/game/boxart/hollow-knight.png" alt="5tr"/>
          
          </a>
          <div className="caption">
    
    <h4>{name}</h4>
    
         
          <a className="btn btn-primary">Click to enter</a>
    
          </div>
          
              </div>
        </div>
        )
    }
    
    export default Product7;


  [1]: https://reactjs/docs/ponents-and-props.html

When you are passing props in functional ponents you have to pass props as an argument for the function.

Another thing is, no need to use this keyword in functional ponents.

function Product7 (props) {
return (
  .
  .
  .
 <h4>{props.name}</h4>
   )
}

Note: It is a good habit to practice ECMA Script 6 arrow functions when using functional ponents, as below.

const Product7 = (props) => {
return (
  .
  .
  .
 <h4>{props.name}</h4>
   )
}

Looks like you forgot using props within the paranthesis.

function Product7 (props) {
...
...
}

Oh, and make sure not to use this.props as you are using a function based ponent (only class based ponents need using this.props)

catch the data by adding props in your function and call it without using this because you are using functional ponent. i suggest to learn the class ponent first before jumping functional ponent