Component Property Default value

This document demonstrates how assigning a default value differes by frameworks and languages

Syntax by languages

React tsx - Syntax

function AppBar({
  title,
  color = "white",
  textColor = "red",
}: {
  title: string;
  color?: string;
  textColor?: string;
}) {
  return (
    <AppBarBase color={color} textColor={textColor}>
      {title}
    </AppBarBase>
  );
}

React jsx - Syntax

jsx requires prop-types package to be installed.

AppBar.propTypes = {
  color: PropTypes.string,
  textColor: PropTypes.string,
};

AppBar.defaultProps = {
  color: "red",
  textColor: "white",
};

References

• https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values

Flutter dart - Syntax

AppBar({
  Key? key,
  Color color = Colors.red,
  Color textColor = Colors.white,
  String title,
}){
    // constructor
}

References

• https://www.bezkoder.com/dart-flutter-constructors/

Vue lang=js - Syntax

app.component("app-bar", {
  props: {
    title: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: "red",
    },
    textColor: {
      type: String,
      default: "white",
    },
  },
});

References

• https://v3.vuejs.org/guide/component-props.html
• StackOverflow: Default values for Vue component props & how to check if a user did not set the prop?

A Universal redundant way

Or we can optionally use a falsy gate to assign default property inside a body (example based on ts)

interface AppBarProps {
  color: string;
}

const color = p.color ?? "red";