如何为带有数据数组的 React 组件传递内联样式的道具？

Question

Here is my ShowData component that renders in my App.js and then in my index.js

import React from "react";
import SwatchData from "./SwatchData";
import { DataTestContainer } from "./DataTestContainer";

function ShowData(props) {
  const DataComponent = SwatchData.map(data => (
    <DataTestContainer color={data.color} key={data.id} hex={data.hex} />
  ));

  return (
    <div style={{ background: "{props.data.color}" }}>{DataComponent}</div>
  );
}

export default ShowData;

what I am looking to dynamically change the style of the final div based on the data.color prop

const SwatchData = [
  {
    id: 1,
    color: "red",
    hex: "#E73550"
  },
  {
    id: 2,
    color: "green",
    hex: "#A6A7DC"
  }
];

export default SwatchData;

Answer 1

Instead of mapping though SwatchData and then trying to wrap it separately, do it all together -

function ShowData(props) {
  const DataComponent = SwatchData.map(data => (
    <div style={{ backgroundColor: data.color }}> 
      <DataTestContainer color={data.color} key={data.id} hex={data.hex} />
    </div>
  ));

  return DataComponent;
}

Also, you need to use backgroundColor to change the background color using inline styles.

Answer 2

Just extracting a single hex color value based on a named color

 const swatchData = [{ id: 1, color: "red", hex: "#E73550" }, { id: 2, color: "green", hex: "#A6A7DC" } ]; const props = { data: { color: 'red', }, }; const getColor = color => { const swatch = swatchData.find(swatch => swatch.color === color); return swatch? swatch.hex: '#000'; } console.log(getColor('red')); console.log(getColor('green')); console.log(getColor('royalPurple')); console.log(getColor(props.data.color));

[edit]

Map the swatch data to JSX directly. Use the id as the key on the outer div so you don't get any react-key warnings, and pass the color and hex on to DataTestContainer .

function ShowData(props) {
  return SwatchData.map(({ color, hex, id }) => (
    <div key={id} style={{ background: color }}>
      <DataTestContainer color={color} hex={hex} />
    </div>
  ));
}