How do I make these react components into an array of them while using typescript?

Question

I am new to TypeScript and React Typescript. I have 1-3 primary syntax issues I'm working through learning right now.

I have a small component in a file called Chunk.js

import React from "react";

export function Chunk({ index, availableStylings, chunkValue }) {
    return (
        <span key={index} className={`stylized ${availableStylings} `}>
            {chunkValue}
        </span>
    );
}

I want to import this file and create an array of Chunks out of it. For instance:

// prettyText.js
import { Chunk } from "./chunk/Chunk";

function prettyText(inputText: string, stylings: Array<Styling>, callback: any): Array<Chunk> {
    let isStylingsEmpty = stylings.length === 0;
    if (isStylingsEmpty) {
        let createNonspecialChunk: any = <typeof Chunk index={0} availableStylings={null} chunkValue={inputText} />;
        let nonspecialChunkArray: any[] = [createNonspecialChunk]
        return (
            nonspecialChunkArray
        );
}

here is another part of that very same function

if (!atLeastOneWellFormedStyling) {
        let createNonspecialChunk: typeof Chunk = <Chunk index={0} availableStylings={null} chunkValue={inputText} />
        let nonspecialChunkArray: typeof Chunk[] = [createNonspecialChunk]
        return (
            nonspecialChunkArray
        );
    }

I wrote typeof Chunk because when I didnt have it I had an underlined red squiggle under Chunk that said 'Chunk' refers to a value, but is being used as a type here. Did you mean 'typeof Chunk'?ts(2749)

I want to have the return value be an array of Chunks. Is typeof Chunk correct? Array<typeof Chunk>?

I see lots of talk about using an interface during import of a component into React TS. I am too new to understand this and put it all together myself. Can someone explain?

The ideal answer works without me having to go make Chunk.js into a .tsx file

Vladimir Rusov · Accepted Answer · 2021-11-26 20:17:03Z

1

Assume your component is:

// Chunk.tsx

import { FC, ReactNode } from "react";

export interface ChunkProps {
  availableStylings?: string | null;
  chunkValue?: ReactNode;
}

export function Chunk({ availableStylings, chunkValue }: ChunkProps) {
  return <span className={`stylized ${availableStylings} `}>{chunkValue}</span>;
}

export const SuperChunk: FC<ChunkProps> = ({
  availableStylings,
  chunkValue
}) => <h1 className={`stylized ${availableStylings} `}>{chunkValue}</h1>;

React has built-in type FC<component props type> to define new functional component.

Then you can...

Create variable for component constructor

// App.tsx

import { ComponentType } from "react";
import { Chunk, ChunkProps, SuperChunk } from "./Chunk";

export default function App() {
  const SelectedChunk: ComponentType<ChunkProps> = false /* some condition */
    ? Chunk
    : SuperChunk;

  return (
    <div className="App">
      <SelectedChunk chunkValue="Selected chunk" />
    </div>
  );
}

Your can use FC type in SelectedChunk variable, but ComponentType is more abstract.

Create variable for component instance

// App.tsx

import { ReactElement } from "react";
import { Chunk, ChunkProps } from "./Chunk";
import "./styles.css";

const ChunkVariable: ReactElement<ChunkProps> = (
  <Chunk availableStylings="Chunk__red" chunkValue={<p>Simple chunk</p>} />
);

export default function App() {
  const ChunkArray: ReactElement<ChunkProps>[] = [
    <Chunk
      key="green"
      availableStylings="Chunk__green"
      chunkValue="Simple chunk 2"
    />
  ];

  return (
    <div className="App">
      {ChunkVariable}
      {ChunkArray}
    </div>
  );
}

When you use jsx syntax, you are actually instantiating a component instance. Therefor ChunkVariable has type ReactElement<ChunkProps> instead of typeof Chunk.

I created a codesandbox to test this.

answered Nov 26, 2021 at 20:17

Vladimir Rusov

463 bronze badges

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

1 Comment

plutownium Over a year ago

I don't understand your explanation...

export const SuperChunk: FC<ChunkProps> = ({   availableStylings,   chunkValue }) => <h1 className={`stylized ${availableStylings} `}>{chunkValue}</h1>;

why is this there? Is there a way to simplify to import from Chunk.tsx to an App.ts file ? I want to import into a .ts file and return it in a function

Collectives™ on Stack Overflow

How do I make these react components into an array of them while using typescript?

1 Answer 1

Create variable for component constructor

Create variable for component instance

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Create variable for component constructor

Create variable for component instance

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related