React + TypeScript | コンポーネントのpropsの受け渡し(style)

Question

前提・実現したいこと

現在、GatsbyでTypeScriptを使用してWebサイトを設計しています。
下記のようにコンポーネント"ColorPalette"を使用したいのですが、styleのpropsの受け渡し方が分からずにいます。

---

index.tsx

<ColorPalette
 colors={[ 
  { hex: "#41436A"},
  { hex: "#000"},
  { hex: "#fafafa"},
 ]}
/>

ColorPalette.tsx

import React, { ReactNode } from 'react';

import { Link } from 'components/link/Link';

import s from './ColorPalette.scss';

interface colors {
  hex: number;
}

interface ColorPaletteProps {
  colors: colors[];
}

export const ColorPalette = ({ hex }: ColorPaletteProps) => (
  <div className={s.colorpalette}>
    {colors.map((item) => (
      <div className={s.colorpalette__item}>
        <span className={s.colorpalette__color} style={{backgroundColor: '{item.hex}'}}></span>
        <h6 className={s.colorpalette__hex}>{item.hex}</h6>
      </div>
    ))}
  </div>
);

該当箇所

下記の部分のbackground-colorの値だけを、コンポーネントを使用する際、動的に変更したいです。しかし、記述の仕方が分からず、エラーが出ています。

<span className={s.colorpalette__color} style={{backgroundColor: '{item.hex}'}}></span>

助言を頂ければ、幸いです。

Answer 1

こんにちは。以下のように修正するといかがでしょうか？

- interface colors {
+ interface Color {
-   hex: number;
+   hex: string;
  }

  interface ColorPaletteProps {
-   colors: colors[];
+   colors: Color[];
 　}

- export const ColorPalette = ({ hex }: ColorPaletteProps) => (
+ export const ColorPalette = ({ colors }: ColorPaletteProps) => (

- style={{ backgroundColor: "{item.hex}" }}
+ style={{ backgroundColor: item.hex }}

修正内容は以下です。

• interface colors の名前を Color に修正
• Color のプロパティ hex の型を stringに修正
• ColorPaletteProps のプロパティ colorsの型を Colorの配列に修正
• ColorPalette コンポーネントのprop hex を colors に修正
• backgroundColor: "{item.hex}" のitem.hexを囲む "{ と }" は不要なので削除

Comments

[kerry]

なるほど！
無事できました。
的確な指示、ご教授大変助かりました。
本当にありがとうございました。

[jun68ykt]

どういたしまして????
> 無事できました。
とのことでよかったです????