React Typescript Cheatsheet

import React from "react";
export type Question = {
    incorrect_answers: string[];
};
export type QuestionState = Question & { answers: string[] };
type Props = {
    children: React.ReactNode
    question: string;
    answer: string[];
    callback: (e: React.MouseEvent<HTMLButtonElement>) => void;
};
const SomeComponent: React.FC<Props> = ({
    children,
    question,
    answer,
    callback
}) => {
    const [questions, setQuestions] = useState<QuestionState[]>([]);
    return <div></div>;
};
export default SomeComponent;

import styled from 'styled-components'
interface ComponentProps {}
export const Component = styled.div<ComponentProps>`

import React from "react";
import { StyleSheet, View, ViewStyle } from "react-native";
type Props = {
    style: ViewStyle;
};
const Card: React.FC<Props> = ({ children, style }) => {
    return <View style={{ ...styles.card, ...style }}>{children}</View>;
};
export default Card;

import React from "react";
import { TextInput, StyleSheet, TextStyle, TextInputProps } from "react-native";
interface Props extends TextInputProps {
    style?: TextStyle;
}
const Input: React.FC<Props> = (props) => {
    return (
        <TextInput
            {...props}
            style={{ ...styles.input, ...props.style }}
        ></TextInput>
    );
};

import {
    NativeSyntheticEvent,
    TextInputTextInputEventData,
} from "react-native";
function numberInputHandler(
        e: NativeSyntheticEvent<TextInputTextInputEventData>
    ) {
        setEnteredValue(e.nativeEvent.text.replace(/[^0-9]/g, ""));
    }