React・「Cannot read property 'props' of undefined」の原因

Question

前提・実現したいこと

Reactの勉強で3カラムのカードレイアウトを表示しようとしているのですが、表題のエラーが発生しています。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'props' of undefined

   5 | return (
   6 |     <Row>
   7 |         <Col xs={12} md={4}>
>  8 |             <h3>{this.props.name}</h3>
   9 | ^           <img src={this.props.image} />
  10 |         </Col>
  11 |     </Row>

該当のソースコード

import React from 'react';
import Card from './Card';
import './App.css';

function App() {
    const cardItem = {
      name: 'Lip',
      image: './image/ico_lip.png'
    }

    return (
        <section id="card">
            <div className="container">
                <h2>Card</h2>
                <Card
                    name = {cardItem.name}
                    image = {cardItem.image}
                />
            </div>
        </section>
    );
}

export default App;

import React from 'react';
import {Row, Col} from 'react-bootstrap';

function Card() {
    return (
        <Row>
            <Col xs={12} md={4}>
                <h3>{this.props.name}</h3>
                <img src={this.props.image} />
            </Col>
        </Row>
    );
}

export default Card;

試したこと

オンラインサイトで勉強した内容なのでコードを見比べてみたのですが、何にエラーが出ているのか分かりません…。
大変初歩的な質問で恐縮ですが、ご回答よろしくお願いいたします。

Answer 1

何にエラーが出ているのか分かりません…。

エラーメッセージには、きちんと行まで出ています。<h3>{this.props.name}</h3>で「propsの参照に失敗した」ということは、thisがundefinedだったということです。

関数コンポーネントにthisは存在しません。propsは、関数の引数として受け取ってください。

Comments

[eggplant_bc]

maisumakun 様

言葉足らずでしたが、エラーの行までは分かったのですがそこの何が悪いのか分かりませんでした…。
関数コンポーネントにはthisは存在しないんですね。。。
引数にpropsを設定したら出来ました！
本当にありがとうございました。