現在、データをマッピングしようとしていますが、マッピングしようとすると表示されます
KetogenicAlkalineFit for Life
次のように表示したいのですが。
ケトジェニック、アルカリ性、生命にフィット
これが私のデータが最初にマッピングされる場所です。\
render() {
const mealplanRecords = this.state.mealplanItems.map(mealplanItem => {
return <MealplanItem mealplanItem={mealplanItem} />
})
return (
<div>
<div className="mealplan-page-header">
<h1>Newest Mealplans</h1>
<hr />
</div>
<div className="content-container">
{mealplanRecords}
</div>
</div>
)
}}
そして、ここにそれが表示されます：
const MealplanItem = props => {
const {
mealplan_name,
mealplan_diets,
} = props.mealplanItem
return(
<div>
<div className="mealplan-card-wrapper">
<div className="mealplan-card-name-wrapper">
<h1 className="mealplan-name">{mealplan_name}</h1>
</div>
<div className="mealplan-diets-wrapper">
<h1 className="Diets">Diets included: {mealplan_diets}</h1>
</div>
<div className="mealplan-button-wrapper">
<button>To Plan</button> {/* This is where it will direct to the specific mealplan. (Needs to be done still) */}
</div>
</div>
</div>
)
}
これが与えられているデータの完全なセットです
<h1 className="Diets">Diets included: {mealplan_diets.join(', ')}</h1>
これにより、配列内の各アイテムが文字列「item1、item2、item3」に結合されます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加