<App/> component is not rendering in React.js

Question

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 />
);

Hakim Abdelcadir · Accepted Answer · 2022-04-22 08:35:05Z

1

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

answered Apr 22, 2022 at 8:35

Hakim Abdelcadir

1,3266 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kuldeep Singh Over a year ago

hey thanks for comment, that was really stupid mistake... I should delete this question,

Hakim Abdelcadir Over a year ago

Your welcome :). If I helped please make sure to mark the answer as correct.

SiddAjmera · Accepted Answer · 2022-04-22 08:37:52Z

0

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.

answered Apr 22, 2022 at 8:37

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

<App/> component is not rendering in React.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related