import React, { useState } from "react";
import { api } from "../utils/api";

interface ResultPropsType {
    input: string,
}

const Results = (props: ResultPropsType) => {
    const searchSomething = api.surau.searhSomething;

    const { data, isLoading } = searchSomething.useQuery({
        name: props.input,
    });

    return (
        {isLoading ? (
            <div>Loading...</div>
        ) : (
            <div>
                {data?.map((item) => {
                    return (
                    <div key={item.id}>
                        <div>{item.name}</div>
                    </div>
                    );
                })}
            </div>
        )}
    );
};

const Test = () => {
    const [input, setInput] = useState<string>("");

    return (
        <div>
            <input type="text" onChange={(e) => setInput(e.target.value)} />
            { input.length > 0 ? <Results input={input} /> : null }
        </div>
    );
};

export default Test;

import React, { useState } from "react";
import { api } from "../utils/api";

interface ResultPropsType {
    input: string,
}

const Results = (props: ResultPropsType) => {
    const searchSomething = api.surau.searhSomething;

    const { data, isLoading } = searchSomething.useQuery({
        name: props.input,
    });

    return (
        {isLoading ? (
            <div>Loading...</div>
        ) : (
            <div>
                {data?.map((item) => {
                    return (
                    <div key={item.id}>
                        <div>{item.name}</div>
                    </div>
                    );
                })}
            </div>
        )}
    );
};

const Test = () => {
    const [input, setInput] = useState<string>("");

    return (
        <div>
            <input type="text" onChange={(e) => setInput(e.target.value)} />
            { input.length > 0 ? <Results input={input} /> : null }
        </div>
    );
};

export default Test;