I don't know where is the issue is arriving. struggling a lot but still my component is not rendering in React.js. it's just showing white screen and nothing else.

Cards.jsx

import React from "react";

function Card(props){
return (
    <>
    <img src={props.imgsrc} alt="mypic"/>
    <h1>{props.title}</h1>
    </>
  )
}

export default Card;

App.jsx

import React from 'react';
import Card from "./Cards";
import Reportdata from "./Api";

const App = () => {
 <>
  {Reportdata.map(val=>{
    return (
     <Card
       key = {val.id}
       imgsrc = {val.image}
       title = {val.title}/>
       )
    })};
 </>
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client'; 
import App from "./App.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
  <App />
);

CodePudding user response：

You need to add the return statement inside the App component:

const App = () => {
 return (
  <>
   {Reportdata.map(val=>{
    return (
     <Card
       key = {val.id}
       imgsrc = {val.image}
       title = {val.title}/>
       )
    })};
  </>
)}

Alternatively, if you don't want to use the return statement make sure to remove the curly braces:

const App = () => (
  <>
   {Reportdata.map(val=>{
    return (
     <Card
       key = {val.id}
       imgsrc = {val.image}
       title = {val.title}/>
       )
    })};
  </>
)

Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions?retiredLocale=it

CodePudding user response：

As mentioned by @poal98, you need a return statement. Or you could also get rid of the { } from the App Component:

const App = () => (
  <>
    {Reportdata.map((val) => {
      return <Card key={val.id} imgsrc={val.image} title={val.title} />;
    })}
    ;
  </>
);

Here's a Working Sample.