Map components are not reflecting-CodePudding

I'm learning React JS.Trying to map components by calling data from external JS file. There is no error or issue in the code.

This is content.jsx inside the /src/component folder.Here I'm rendering mapped components from App.jsx.

import React from 'react';

export default function Content(props) {
    <div>
        <p> {props.name} </p>
        <p> {props.rollNo} </p>
    </div>
}

This is App.jsx inside the src folder

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>
    )
    
}

and rendering App.js to index.js which is in src folder. The data.js contains data in src folder.

Data.js file:

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;

The issue I can output other JSX elements, but I'm not able to display mapped components. What's wrong with my code ?

CodePudding user response：

Im guessing that "Content" component is the "Joke" component, if so, it has no return statement, try:

export default function Joke(props) {
  return (
    <div>
      <p> {props.name} </p>
      <p> {props.rollNo} </p>
    </div>
  );
}

CodePudding user response：

You need a return statement in Joke function of content.js