React Props not getting displayed Uncaught Type Error(Plz Check out the Image Link to see full code-CodePudding

enter image description hereWhen I try to display the prop that I'm passing it just turn to pure white screen but when I log them to console it works fine no error no white screens I'm confused because the error I'm getting is Uncaught Type Error

import React from 'react'
import Key from './Key'
import "./piano.css";
const Piano = () => {
  return (
    <>
    <div className="piano">
        <Key note = "c"/>
        <Key note = "c#"/>
        <Key note = "d"/>
        <Key note = "d#"/>
        <Key note = "e"/>
        <Key note = "f"/>
        <Key note = "f#"/>
        <Key note = "g"/>
        <Key note = "g#"/>
        <Key note = "a"/>
        <Key note = "a#"/>
        <Key note = "b"/>
        {/* <Key note = "C"/> */}
    </div>
    </>
  )
}

export default Piano

enter image description here

CodePudding user response：

There is an error in the Key component.

<p>{this.props}</>

function components take props as an argument, so this.props. will be undefined.

It looks like you intend to render the note prop, so you should write it like this instead:

<p>{props.note}</p>