SpellingListDataオブジェクトのコンテンツを表示できます。1つのh1タグにすべての単語を表示しています。それは私が今必要としているものではありません。
spellingListDataをすべての単語を含む1つの配列に変換すると、配列内のアイテムごとに複数のh1タグをマッピングして作成できます。それが私が望んでいることです-各単語にh1タグを割り当てます。
何が足りないのですか？私はこれで立ち往生しています。オブジェクトの配列にドリルダウンするにはどうすればよいですか？うまくいかなかったword [0] .spellingwordsを試しましたか？
データコンポーネント：
import React from "react";
import { useState } from "react";
import WordList from "./WordList";
function Data(props) {
const [words, setWords] = useState(spellingListData);
return (
<div>
<WordList words={words} />
</div>
);
}
// Simulated Data
const spellingListData = [
{
id: 1,
spellingWords: ["careful", "stared", "shared", "pair", "stairs", "wear", "bear", "where", "there", "dear", "rear", "gear", "here", "career", "peer", "shore", "carve", "storm"],
},
{
id: 2,
bonusWords: ["January", "parable"],
},
];
export default Data;
WordListコンポーネント：
import React from "react";
function WordList({ words }) {
return (
<div>
{
words.map((word) => {
return <h1 key={word.id}>{word.spellingWords}</h1>;
})
}
</div>
);
}
export default WordList;
あなたはspellingWords配列にマッピングする必要があります：
function WordList({ words }) {
return (
<div>
{
words[0].spellingWords.map( word =>
(<h1 key={word}>{word}</h1>)
)
}
</div>
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加