How to conditionally render stroke color in React with Fluent UI and react-hooks?

Question

Here props.data!.lineChartData![0].color! can be optional, so what to modify in code such that if it is defined then it should render stroke color from props.data!.lineChartData![0].color! else from sam.line stroke where sam=useSample(), Please check the photo for code tried before. use of makestyle provided by griffel library

    export const SparklineBase = (props: ISparklineProps) => {
  const myclass = useClasses();
  const mycolor = useColorStyles();
  const sam = useSample();
  const margin = React.useRef({
    top: 2,
    right: 0,
    bottom: 0,
    left: 0,
  });
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const x = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const y = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const area = React.useRef<any>();
  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
  const line = React.useRef<any>();
  const [_points, setPoints] = React.useState<ILineChartDataPoint[] | null>(null);
  const [_width] = React.useState<number>(props.width! || 80);
  const [_height] = React.useState<number>(props.height! || 20);
  const [_valueTextWidth] = React.useState<number>(props.valueTextWidth! || 80);
  React.useEffect(() => {
    area.current = d3Area()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .x((d: any) => x.current(d.x))
      .y0(_height)
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .y1((d: any) => y.current(d.y))
      .curve(d3curveLinear);
    line.current = d3Line()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .x((d: any) => x.current(d.x))
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .y((d: any) => y.current(d.y))
      .curve(d3curveLinear);
    const points = props.data!.lineChartData![0].data;
    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
    const [xMin, xMax] = d3Extent(points, (d: any) => d.x);
    x.current = d3ScaleLinear()
      .domain([xMin, xMax])
      .range([margin.current.left!, _width - margin.current.right!]);
    y.current = d3ScaleLinear()
      /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
      .domain([0, d3Max(points, (d: any) => d.y)])
      .range([_height - margin.current.bottom!, margin.current.top!]);
    setPoints(points);
  }, [_height, _width, props.data]);
  const drawSparkline = React.useCallback(() => {
    const strokeColor = props.data!.lineChartData![0].color || mycolor[1];
    const fillColor = props.data!.lineChartData![0].color || mycolor[2];
    // const a = mergeClasses(props.data!.lineChartData![0].color, sam.line);
    return (
      <>
        <path
          className={` ${strokeColor}`}
          // className={sam.line}
          d={line.current(_points)}
          fill={'transparent'}
          opacity={1}
          strokeWidth={2}
          stroke={props.data!.lineChartData![0].color!}
        />
        <path
          className={` ${fillColor}`}
          // className="area"
          d={area.current(_points)}
          opacity={1}
          fillOpacity={0.2}
          fill={props.data!.lineChartData![0].color!}
          aria-label={`Sparkline with label ${props.data!.lineChartData![0].legend!}`}
        />
      </>
    );
  }, [_points, mycolor, props.data, sam.line]);
  const classNames = getClassNames(props.styles!, {
    theme: props.theme!,
  });

I tried hooks like this but it only surrounds with color.Tried Solution using makestyle function provided by griffel

B-Brazier · Answer 1 · 2023-05-26T05:14:42.820

0

You could just conditionally rendering: https://legacy.reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

It would look like so:

{props.data!.lineChartData![0].color! ? props.data!.lineChartData![0].color! : /*fallback colour*/ }

edited May 26 '23 at 05:14

answered May 26 '23 at 04:40

B-Brazier

96
6

stroke line should be removed and from classname it should take the input color – Egeon May 26 '23 at 04:56
I may have misinterpreted your example. Basically with the conditional above your would check if it's true and than true /false. { /*condition*/ ? /* if true */ : /*if false*/} – B-Brazier May 26 '23 at 05:16

score 0 · Answer 2 · answered May 26 '23 at 05:36

your code has lots of nullable properties so it can give unexpected results sometimes. checking property if exists or not is good.

stroke={props.data && props.data.hasOwnProperty('lineChartData') && props.data.lineChartData.length > 0 && props.data.lineChartData[0].color ? props.data.lineChartData[0].color : sam.line}

How to conditionally render stroke color in React with Fluent UI and react-hooks?

2 Answers2