ReactJS SOLID Principle　~OCP (Open Closed Principle)~

The OCP principle states that: The extent of the component or function should be open, and its modification should be closed. Bad code import React , { VFC } from " react " ; type Props = { title : string ; type : " default " | " withLinkButton " | " withNormalButton " ; href ?: string ; buttonText ?: string ; onClick ?: () => void ; }; export const Title : VFC < Props > = ({ title , type , href , buttonText , onClick , }) => { return ( < div style = { { display : " flex " , justifyContent : " space-between " } } > < h1 > { title } </ h1 > { type === " withLinkButton " && ( < button onClick = { onClick } > < a href = { href } > { buttonText } </ a > </ button > ) } { type === " withNormalButton " && ( < button onClick = { onClick } > { buttonText } </ button > ) } </ div > ); }; This component receives props such as title , type , and so forth. There are three use cases: a non-displaying button; a displaying button to the left of the title, and a normal displaying button. * Why does th