Apply Inline Color within Div Tag Typescript React

user_19251203 0
Viewed 40

In my application, I want to display the objects in the Recharts ToolTip properties, payload in a <p> tag.

Within the payload array, it includes the color as an attribute called fill which I want to color the text in the corresponding <p> See below the console.log(payload)

enter image description here

See code below:

  const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
    console.log(payload);
    if(active && payload && payload.length){
      return (
        <div className = "custom-tooltip">
          <p> {payload[0] ? `${payload[0].dataKey} : ${payload[0].value}` : ""}</p>
          <p> {payload[1] ? `${payload[1].dataKey} : ${payload[1].value}` : ""}</p>
          <p> {payload[2] ? `${payload[2].dataKey} : ${payload[2].value}` : ""}</p>
          <p> {payload[3] ? `${payload[3].dataKey} : ${payload[3].value}` : ""}</p>
          <p> {payload[4] ? `${payload[4].dataKey} : ${payload[4].value}` : ""}</p>
        </div>
      );
    }
    return null;
  }
typescript reactjs css html javascript
1 Answers

Maybe I have not understood the question but why can't your code be:

  const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
    console.log(payload);
    if(active && payload && payload.length){
      return (
        payload.map( pl => <p style="color: " + {pl.fill}>{pl.dataKey} : {pl.value}</p> );
      );
    }
    return null;
  }
user_143347060
Related