I am creating a simple app which renders a list of courses and some details about the courses.

The course details are split into the Header, Content and Total.

In the Content section, is a child component: Part, however the component is not rendering with no error messages in the console or errors thrown by Typescript Does anyone know why this is happening?

App.js

import Header from './components/Header'
import Content from './components/Content'
import Total from './components/Total'
import { CoursePart } from './types'

const App = () => {
  const courseName = "Half Stack application development";
  const courseParts: CoursePart[] = [
    {
      name: "Fundamentals",
      exerciseCount: 10,
      description: "This is the easy course part",
      type: "normal"
    },
    {
      name: "Advanced",
      exerciseCount: 7,
      description: "This is the hard course part",
      type: "normal"
    },
    {
      name: "Using props to pass data",
      exerciseCount: 7,
      groupProjectCount: 3,
      type: "groupProject"
    },
    {
      name: "Deeper type usage",
      exerciseCount: 14,
      exerciseSubmissionLink: "https://fake-exercise-submit.made-up-url.dev",
      type: "submission"
    }
  ]
  return (
    <div>
      <Header courseName={courseName} />
      <Content courseParts={courseParts} />
      <Total courseParts={courseParts} />
    </div>
  );
};

export default App;

Content.tsx

import { interfacePart } from '../types'
import Part from './Part'

const Content = ({ courseParts }: {courseParts: interfacePart })  => {

  return (
 
    <div>
      <Part courseParts={courseParts} />
    </div>

  )
}

export default Content

Part.tsx

import { interfacePart } from '../types'

// eslint-disable-next-line react/prop-types
const Part = ({ courseParts }: {courseParts: interfacePart })  => {

  console.log(courseParts)
  return (
    <>
      {courseParts.forEach((part) => {
        switch (part.name) {
          case 'Fundamentals':
            return <div><p>{part.name} {part.exerciseCount}</p> </div>;

          case 'Advanced':
            return <div>{part.name}</div>;
          case 'Using props to pass data':
            return <div>{part.name}</div>;

          case 'Deeper type usage':
            return <div>{part.name}</div>;
          default:
            break;
        }
      })}
    </>
  );
}

export default Part

CodePudding user response：

use map instead of forEach, foreach just go through array and dont return new array and therefore there is nothing rendered.

import { interfacePart } from '../types'

// eslint-disable-next-line react/prop-types
const Part = ({ courseParts }: {courseParts: interfacePart })  => {

  console.log(courseParts)
  return (
    <>
      {courseParts.map((part) => {
        switch (part.name) {
          case 'Fundamentals':
            return <div><p>{part.name} {part.exerciseCount}</p> </div>;

          case 'Advanced':
            return <div>{part.name}</div>;
          case 'Using props to pass data':
            return <div>{part.name}</div>;

          case 'Deeper type usage':
            return <div>{part.name}</div>;
          default:
            break;
        }
      })}
    </>
  );
}

export default Part

CodePudding user response：

The answer is

1. As @Wraithy says, use map instead of forEach.

2. TypeScript won't let you map without adding map to the interface "interfacePart" in types in types like this:

   export interface interfacePart { reduce(arg0: (carry: any, part: any) => any, arg1: number): import("react").ReactNode; forEach(arg0: (part: any) => JSX.Element | undefined): unknown; map(arg0: (part: any) => JSX.Element | undefined): unknown; part?: CoursePart;

}

Certainly not ideal but I tried everything else...