ReactJS Props Undefined

Question

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 './componentep7/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 component 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.org/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.

Answer 1

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

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

Answer 2

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

Answer 3

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

function Product7(props) {
...

Answer 4

You cant use this in functional component. 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.org/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.org/docs/components-and-props.html

Answer 5

You should pass props as an argument in your component.

function Product7(props){
    ...
}

Answer 6

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

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

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

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

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

Answer 7

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 component (only class based components need using this.props )

Answer 8

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