Przekazywanie tablicy do komponentu w react

0

Dobry wieczór,

Skonfigurowałem środowisko i napisałem poniższy kod.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
type Issue = {
    name: string,
    value: string
}
 
const is1: Issue = {
    name: "test",
    value: "pieknie"
}
 
const is2: Issue = {
    name: "test2",
    value: "pieknie2"
}
 
const offerProps: Issue[] = [is1,is2]
 
export const Issue = ({ name, value }: Issue) =>
    <li>{ name }: {value}</li>
 
export const Offer = (issues: Array<Issue>) =>
  <ul>
      {issues.map(function(issue) {
          <Issue {...issue}/>
      })}
  </ul>
 
const issuesExample = [is1, is2]
 
ReactDOM.render(
    <div>
        <Offer {...offerProps} />
    </div>,
    document.getElementById('app')
)

Kod nie działa, a w konsoli przeglądarki zwraca błąd "issues.map is not a function".
Co robię nie tak?

Pozdrawiam,
AM

1
  1. Issue to nie typ tylko interface
    2.Array<Issue> -----> Array[] -2 wersja wydaje się być sensowniejsza
  2. spreadujesz wartość offerProps więc już nie jest tablicą, tylko klucz - wartość.
  3. Polecam zainstalować eslinter, sprewdowanie w taki sposób raczej nie jest zalecane.
0
import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface Issue {
    name: string,
    value: string
}

const is1: Issue = {
    name: "test",
    value: "pieknie"
}

const is2: Issue = {
    name: "test2",
    value: "pieknie2"
}

interface OfferProps {
    issues: Issue[]
}

let offerProps: OfferProps = {
    issues: [is1, is2]
}

export const IssueComponent = ({ name, value }: Issue) => (
    <div>
        {console.log(name)}
        <li>{ name }: {value}</li>
    </div>
    
)

export const OfferComponent = ({issues}: OfferProps) =>
  <ul>
      {issues.map((issue) =>
        <IssueComponent name={issue.name} value={issue.value} />
      )}
  </ul>

let issuesExample = [is1, is2]

ReactDOM.render(
    <div>
        <OfferComponent issues={issuesExample} />
    </div>,
    document.getElementById('app')
)

działająca wersja kodu

1 użytkowników online, w tym zalogowanych: 0, gości: 1