react typescript

Question

Mam taki problem z Typescriptem- nie potrafię określić typu dla tego kodu więc dałem any

function Display({ toDoList }: any) {
    console.log(toDoList);
    const display = toDoList.map((item: any) => {
        console.log(item);

        return (

            <div key={item.id}>
                <h1> {item} </h1>
            </div>
        )
    })

    return (
        <>
            {display}
        </>
    )
}

ktoś wie co powinienem wpisać zamiast any? toDoList w konsoli tak się wyświetla:

1. (2) [{…}, {…}]
   1. 0: {text: "Walk the dog", complete: true, id: 1}
   2. 1: {text: "Play with Frodo", complete: false, id: 2}
   3. length: 2
   4. __proto__: Array(0)

Czyli jest to tablica z obiektami

jest jeszcze jeden błąd w konsoli 

react-dom.development.js:13413 Uncaught Error: Objects are not valid as a React child (found: object with keys {text, complete, id}). If you meant to render a collection of children, use an array instead.
    in h1 (at Display.tsx:14)
    in div (at Display.tsx:13)
    in Display (created by ConnectFunction)
    in ConnectFunction (at App.tsx:11)

Czy ktoś wie co ja robię źle? W Reakcie bez Typescriptu coś takiego chodziło....

Comments

wystawisz mi ta apke na jakims repozytorium?

Answer 1

Początek powinien wyglądać tak:
 

type YourProps = {
    toDoList: Array;
}

const Display: React.FC<YourProps> = (props) => {
   console.log(props.toDoList);
}

Drugi błąd dotyczy tego, że w tagu h1 odwołujesz się do obiektu zamiast do typu prymitywnego. Powinieneś tam odwoływać się do 

<h1> item.name</h1> //lub jakiś inny artybut tego obiektu

 

Comments

a masz może Slacka?

---

ja mam na githubie

Pawel Nackiewicz

Awaiting PawelNackiewicz’s response

---

dobra miałem maila w spamie, push poszedł

---

Aha, czyli zrobiłeś to bez Reduxa,

Dzięki za poświęcony czas... :)

---

tam go po prostu nie potrzebujesz a jak cos do tego stanu uzywałbym hooka useState