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

Pranshu Sati 0
Viewed 16

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

react-props web reactjs
1 Answers

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>
userPeG70
Related