Rendering multiple child components via map function on data object-CodePudding

I'm currently learning react. At this point I'm trying to render multiple child components within the parent compnent by calling the map method on the data object array that is passed to the parent.

My code looks like this:

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {MOCK_CONTENTS} from "./DataDomain/Mocks/MockContents";
import SwipeView from "./components/SwipeView";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <SwipeView contents={MOCK_CONTENTS}/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

SwipeView.tsx

import {Content} from "../DataDomain/Entities/Content";
import ContentCard from "./ContentCard";

interface SwipeViewProps {
    contents: Content[];
}

function SwipeView({ contents }: SwipeViewProps): JSX.Element {
    return <> {contents.map( content => {
        ContentCard({content});
    })} </>
}

export default SwipeView;

ContentCard.tsx

import React from "react";
import {Content} from "../DataDomain/Entities/Content";

interface ContentCardProps {
    content: Content;
}

function ContentCard({ content }: ContentCardProps): JSX.Element {
    return (
        <>
            <h1>{ content.title }</h1>
        </>
    );
}

export default ContentCard;

Where MOCK_CONTENTS is a array of the data objects.

The problem is that I'm just getting a white page and no error whatsoever.

CodePudding user response：

this is the correct way.
SwipeView.tsx

import {Content} from "../DataDomain/Entities/Content";
import ContentCard from "./ContentCard";

interface SwipeViewProps {
    contents: Content[];
}

function SwipeView({ contents }: SwipeViewProps): JSX.Element {
    return <> {contents.map( (content,index) => <ContentCard key={index} content={content} /> )} </>
}

export default SwipeView;

note: it's better to use a specific id for the key instead of an index.

CodePudding user response：

You're missing a return statement in your SwipeView.tsx component.

function SwipeView({ contents }: SwipeViewProps): JSX.Element {
    return <>{contents.map((content, index) => { 
        <ContentCard key={index} content={content} />; // Missing return here
    })} </>
}

With braces, you have to explicitly return your JSX. You can implicitly return JSX by instead wrapping your JSX in a parenthesis instead of braces.

For example:

function SwipeView({ contents }: SwipeViewProps): JSX.Element {
    return <>{contents.map((content, index) => <ContentCard key={index} content={content} />)}</>;
}

In React, it is also vital that you always have a key prop when returning JSX within a loop so React is able to easily detect which component has been updated during it's reconciliation re-render process. Note the addition of key in each example.