Estoy aprendiendo React JS. Intento mapear componentes llamando datos desde un archivo JS externo. No hay ningún error o problema en el código.

Este es content.jsx dentro de la carpeta /src/component . Aquí estoy renderizando componentes mapeados de App.jsx.

 import React from 'react'; export default function Content(props) { <div> <p> {props.name} </p> <p> {props.rollNo} </p> </div> }

Este es App.jsx dentro de la carpeta src

 import React from 'react'; import Content from './component/content'; import Data from './Data' export default function App() { const jokeElements = Data.map( (ele) => { return( <Content name={ele.name} rollNo={ele.rollNo} /> ); }) return( <div> {jokeElements} </div> ) }

y renderizando App.js a index.js que está en la carpeta src . El data.js contiene datos en la carpeta src .

Archivo de datos.js:

 const Data=[ { name:"Deepak", rollNo:"123" }, { name:"Yash", rollNo:"124" }, { name:"Raj", rollNo:"125" },{ name:"Rohan", rollNo:"126" }, { name:"Puneet", rollNo:"127" }, { name:"Vivek", rollNo:"128" }, { name:"Aman", rollNo:"129" }, ] export default Data;

El problema: puedo generar otros elementos JSX, pero no puedo mostrar los componentes asignados. ¿Qué pasa con mi código?