Chap03 -> Creating function-based components -> Optional and default props

QandA/frontend/src/Question.tsx

@@ -3,11 +3,19 @@ import { QuestionData } from './QuestionsData';
 
 interface Props {
   data: QuestionData;
+  showContent?: boolean;
 }
 
-export const Question = ({ data }: Props) => (
+export const Question = ({ data, showContent }: Props) => (
   <div>
     <div>{data.title}</div>
+    {showContent && (
+      <div>
+        {data.content.length > 50
+          ? `${data.content.substring(0, 50)}`
+          : data.content}
+      </div>
+    )}
     <div>
       {`Ask by ${
         data.userName
@@ -15,3 +23,7 @@ export const Question = ({ data }: Props) => (
     </div>
   </div>
 );
+
+Question.defaultProps = {
+  showContent: true,
+};