Im creating code override to change the text of component, for now it fully replaces the text as Im changing the children prop, but with replacing children, it also resets all other props like text styles, is there any other way to change text and keep the styles?

function SetCurrentUsd(props: Props): ReactNode {
  const { initialUsd } = props;

  const [usd, setUsd] = useState<string | number>("");

  useEffect(() => {
    // my fetch data logic here
   setUsd(data.response)
  }, [initialUsd]);

  return <>{usd}</>;
}

export function set50Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={50} />,
    }
}

export function set100Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={100} />,
    }
}

export function set500Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={500} />,
    }
}

export function set1000Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={1000} />,
    }
}

Im creating code override to change the text of component, for now it fully replaces the text as Im changing the children prop, but with replacing children, it also resets all other props like text styles, is there any other way to change text and keep the styles?

function SetCurrentUsd(props: Props): ReactNode {
  const { initialUsd } = props;

  const [usd, setUsd] = useState<string | number>("");

  useEffect(() => {
    // my fetch data logic here
   setUsd(data.response)
  }, [initialUsd]);

  return <>{usd}</>;
}

export function set50Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={50} />,
    }
}

export function set100Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={100} />,
    }
}

export function set500Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={500} />,
    }
}

export function set1000Usd(): Override {
    return {
        children: <SetCurrentUsd initialUsd={1000} />,
    }
}

• reactjs

1 Answer 1

You need to pass and accept props in your setter function:

export function set50Usd({...props}:unknown): Override {
    return {
        ...props,
        children: <SetCurrentUsd initialUsd={50} />,
    }
}

second guess:

export function set50Usd({...props}:unknown): Override {
    return {
        children: <SetCurrentUsd initialUsd={50} {...props} />,
    }
}