() => {
const [baseString, setBaseString] = React.useState('Seven Green Apples');
const [stringToMatch, setStringToMatch] = React.useState('green');
const [{ before, match, after }, updateResult] = React.useState(() =>
getStringMatch(baseString, stringToMatch),
);
const matchString = () => {
const { before, match, after } = getStringMatch(baseString, stringToMatch);
updateResult({ before, match, after });
};
return (
<Stack flexDirection="column">
<Flex>
<FormControl>
<FormControl.Label>Base string</FormControl.Label>
<TextInput
value={baseString}
onChange={(e) => setBaseString(e.target.value)}
/>
</FormControl>
<FormControl>
<FormControl.Label>
A string to match the base string
</FormControl.Label>
<TextInput
value={stringToMatch}
onChange={(e) => setStringToMatch(e.target.value)}
/>
</FormControl>
</Flex>
<Button onClick={matchString}>Match strings</Button>
<Heading as="h4">Results</Heading>
<Paragraph element="p">{`{ before: "${before}", match: "${match}", after: "${after}" }`}</Paragraph>
</Stack>
);
};