Fix the textfield exampls

src/components/allTools/AllTools.tsx

@@ -20,8 +20,8 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
       </Typography>
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         <Grid container spacing={2}>
-          {toolCards.map((card) => (
+          {toolCards.map((card, index) => (
-            <Grid item xs={4} key={card.title}>
+            <Grid item xs={4} key={index}>
               <ToolCard
                 title={card.title}
                 description={card.description}

src/components/examples/ExampleCard.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ExampleCardProps } from './Examples';
 import {
   Box,
@@ -16,16 +15,9 @@ export default function ExampleCard({
   description,
   sampleText,
   sampleResult,
-  requiredOptions
+  requiredOptions,
+  changeInputResult
 }: ExampleCardProps) {
-  const handleSampleTextClick = () => {
-    console.log('TextField clicked');
-  };
-
-  const handleSampleResultClick = () => {
-    console.log('TextField clicked');
-  };
-
   return (
     <Card
       raised
@@ -52,7 +44,7 @@ export default function ExampleCard({
           </Typography>
 
           <Box
-            onClick={handleSampleTextClick}
+            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',
@@ -83,7 +75,7 @@ export default function ExampleCard({
 
           <ArrowDownwardIcon />
           <Box
-            onClick={handleSampleResultClick}
+            onClick={() => changeInputResult(sampleText, sampleResult)}
             sx={{
               display: 'flex',
               zIndex: '2',

src/components/examples/Examples.tsx

@@ -7,6 +7,7 @@ export interface ExampleCardProps {
   sampleText: string;
   sampleResult: string;
   requiredOptions: RequiredOptionsProps;
+  changeInputResult: (input: string, result: string) => void;
 }
 
 export interface RequiredOptionsProps {
@@ -39,14 +40,15 @@ export default function Examples({
 
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         <Grid container spacing={2}>
-          {exampleCards.map((card) => (
+          {exampleCards.map((card, index) => (
-            <Grid item xs={4} key={card.title}>
+            <Grid item xs={4} key={index}>
               <ExampleCard
                 title={card.title}
                 description={card.description}
                 sampleText={card.sampleText}
                 sampleResult={card.sampleResult}
                 requiredOptions={card.requiredOptions}
+                changeInputResult={card.changeInputResult}
               />
             </Grid>
           ))}

src/components/examples/RequiredOptions.tsx

@@ -14,7 +14,6 @@ export default function RequiredOptions({
     if (toolsElement) {
       toolsElement.scrollIntoView({ behavior: 'smooth' });
     }
-    console.log('tool clicked');
   };
 
   return (

src/components/options/CheckboxWithDesc.tsx

@@ -23,7 +23,6 @@ const CheckboxWithDesc = ({
       <FormControlLabel
         control={
           <Checkbox
-            defaultChecked
             checked={checked}
             onChange={handleChange}
             disabled={disabled}

src/pages/string/join/index.tsx

@@ -165,6 +165,16 @@ export default function JoinText() {
     return null;
   };
 
+  function changeInputResult(input: string, result: string) {
+    setInput(input);
+    setResult(result);
+
+    const toolsElement = document.getElementById('tool');
+    if (toolsElement) {
+      toolsElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+
   return (
     <Box>
       <Grid container spacing={2}>
@@ -203,9 +213,9 @@ export default function JoinText() {
                 <Typography fontSize={22}>
                   Blank Lines and Trailing Spaces
                 </Typography>
-                {blankTrailingOptions.map((option) => (
+                {blankTrailingOptions.map((option, index) => (
                   <CheckboxWithDesc
-                    key={option.accessor}
+                    key={index}
                     title={option.title}
                     checked={!!values[option.accessor]}
                     onChange={(value) => setFieldValue(option.accessor, value)}
@@ -225,7 +235,10 @@ export default function JoinText() {
       <Examples
         title="Text Joiner Examples"
         subtitle="Click to try!"
-        exampleCards={exampleCards}
+        exampleCards={exampleCards.map((card) => ({
+          ...card,
+          changeInputResult
+        }))}
       />
       <Separator backgroundColor="#5581b5" margin="50px" />
       <AllTools title="All Text Tools" toolCards={toolCards} />