React Components with Default Props

Mar 10, 2023 - 2 min read

The Problem: Managing Props Dynamically

In real-world applications, React components often need to handle a wide range of inputs (props) that influence their appearance or behavior. For example:

A button component might need to change its size, color, or disabled state based on certain conditions
A form field could adjust its placeholder text or validation rules dynamically.

While these customizations make components powerful, they can also lead to problems. Developers may forget to set certain props or pass incorrect values, causing the component to behave unexpectedly.

The Solution: Default Props

Default props are a powerful feature in React that allow you to define default values for a component’s props. When a prop is not provided by the parent component, React automatically uses the default value instead. This ensures that the component always has the necessary data to render correctly, even if the parent component forgets to pass certain props. Here’s a simple example of setting default props in a functional React component:

default-props-example.tsx

import Button from "./components/button";
import { Loading, Warning } from "./components/icons";

export default function App() {
  return (
    <>
      <Button type="primary" icon={<Loading color="white" />} />
      <Button type="secondary" icon={<Loading />} />
      <Button icon={<Loading />} />
    </>
  );
}
const Button= ({
  type,
  icon,
  size,
  disabled,
}: {
  type?: string;
  icon: ReactElement;
  size?: string;
  disabled?: string;
})=> {
  const defaultProps= {
    size: size= "lg" ? "lg" : "md",
    color: type= "primary" ? "white" : "black",
  };
  const newProps= {
    ...defaultProps,
    ...icon.props,
  };
  if (disabled) {
    newProps.color= "gray";
  }
  const clonedIcon= React.cloneElement(icon, newProps);
  return <button>Submit {clonedIcon}</button>;
};
export default Button;
export const Loading = ({ size, color }: { size?: string; color?: string }) => {
  return <span style={{ fontSize: size, color: color }}>⏳</span>;
};
export const Error = () => {
  return <span>❌</span>;
};
export const Warning = () => {
  return <span>⚠️</span>;
};
export const Avatar = () => {
  return <span>😎</span>;
};