Setting the UseState value with data received from trpc response

Question

Setting the UseState value with data received from trpc response

I am attempting to set the initial value of the UseState as the first and last names of my users based on the response received from the tRPC API.

    const { data: sessionData } = useSession();

    const { data: currentUser } = api.user.get.useQuery(
        undefined, // no input
        { enabled: sessionData?.user !== undefined }
    )

    const [formData, setFormData] = useState({
        firstname: "",
        lastname: "",
    });

    const updateUser = api.user.update.useMutation()

    const handleInput = (e: { target: { name: any; value: any; }; }) => {
        const fieldName = e.target.name;
        const fieldValue = e.target.value;

        setFormData((prevState) => ({
            ...prevState,
            [fieldName]: fieldValue
        }));
        console.log(formData)
    }

I initially set the state of both firstname and lastname to empty strings.

In the form, I then set the default value to currentUser?.user?.firstname and currentUser?.user?.lastname. These values are correctly displayed in the form input fields.

https://i.sstatic.net/nv611.png

When I only change one field, the other remains an empty string because handleInput has not been called on that field, thus not updating the input value to match the defaultValue. Subsequently, when I submit the form, the unchanged input is overwritten with a blank string in the database.

Is there a way to correct this behavior so that when currentUser is no longer null, we update the formData from a blank string to the correct value?

typescript react-hooks trpc.io

Answer 1

Answer №1

To ensure the form input value is synced with the state value, one approach is to utilize a useEffect hook on the currentUser value:

    const { data: sessionData } = useSession();

    const { data: currentUser } = api.user.get.useQuery(
        undefined, // no input
        { enabled: sessionData?.user !== undefined }
    )

    const [formData, setFormData] = useState({
        firstname: "",
        lastname: "",
    });

    useEffect(() => {
        if(currentUser)
            setFormData({
                firstName: currentUser.firstName,
                lastName: currentUser.lastName
            })
    ), [currentUser]);

    const updateUser = api.user.update.useMutation()

    const handleInput = (e: { target: { name: any; value: any; }; }) => {
        const fieldName = e.target.name;
        const fieldValue = e.target.value;

        setFormData((prevState) => ({
            ...prevState,
            [fieldName]: fieldValue
        }));
        console.log(formData)
    }

Incorporating a loading state and showing the fields only when the data has loaded can enhance user experience. Consider moving the state to a child component and initializing it based on props once the data has been fetched.

    const { data: sessionData } = useSession();

    const { data: currentUser, isLoading } = api.user.get.useQuery(
        undefined, // no input
        { enabled: sessionData?.user !== undefined }
    )

    if(isLoading)
        return (<div>Loading...</div>);
    else if(currentUser)
        return (
            <UserForm
                firstName={currentUser.firstName}
                lastName={currentUser.lastName}
            />
        );

Answer 2

To ensure the form input value is synced with the state value, one approach is to utilize a useEffect hook on the currentUser value:

    const { data: sessionData } = useSession();

    const { data: currentUser } = api.user.get.useQuery(
        undefined, // no input
        { enabled: sessionData?.user !== undefined }
    )

    const [formData, setFormData] = useState({
        firstname: "",
        lastname: "",
    });

    useEffect(() => {
        if(currentUser)
            setFormData({
                firstName: currentUser.firstName,
                lastName: currentUser.lastName
            })
    ), [currentUser]);

    const updateUser = api.user.update.useMutation()

    const handleInput = (e: { target: { name: any; value: any; }; }) => {
        const fieldName = e.target.name;
        const fieldValue = e.target.value;

        setFormData((prevState) => ({
            ...prevState,
            [fieldName]: fieldValue
        }));
        console.log(formData)
    }

Incorporating a loading state and showing the fields only when the data has loaded can enhance user experience. Consider moving the state to a child component and initializing it based on props once the data has been fetched.

    const { data: sessionData } = useSession();

    const { data: currentUser, isLoading } = api.user.get.useQuery(
        undefined, // no input
        { enabled: sessionData?.user !== undefined }
    )

    if(isLoading)
        return (<div>Loading...</div>);
    else if(currentUser)
        return (
            <UserForm
                firstName={currentUser.firstName}
                lastName={currentUser.lastName}
            />
        );

Answer 3

Answer №2

I managed to find a solution for this, but I'm not sure if it's the most efficient way.

Below is how I approached it:

    useEffect(() => {
        setFormData({
            firstName: (loggedInUser && loggedInUser?.firstName) || "",
            lastName: (loggedInUser && loggedInUser?.lastName) || "",
        })
    }, [loggedInUser]);

Answer 4

I managed to find a solution for this, but I'm not sure if it's the most efficient way.

Below is how I approached it:

    useEffect(() => {
        setFormData({
            firstName: (loggedInUser && loggedInUser?.firstName) || "",
            lastName: (loggedInUser && loggedInUser?.lastName) || "",
        })
    }, [loggedInUser]);

Setting the UseState value with data received from trpc response

Answer №1

Answer №2

Similar questions

Creating a contravariant function member in TypeScript?

Angular 8: Master the art of HTML binding

Error: The function _this. is not callable

What is the reason behind the narrowing of the type by indexing into a mapped type?

Error: Unable to locate 'v8' in NextJS when using Twin Macro

Struggling to Retrieve Class-Declared Variable in Angular 2 HTML Template

Combine arrays of objects by comparing two attributes in Typescript

What is the method for activating a hook after a state change in a functional component?

What is the proper type declaration for incoming data from the backend in my TypeScript code when using axios?

Tips for integrating Material-Ui Autocomplete with Formik's Field component to create Multi-Select check boxes

List out the decorators

Unlock the power of Angular Router to execute unique actions with each click

What steps should I take to enable a clock plugin for my Discord Bot using the Discordeno framework?

What is the TypeScript syntax for defining a component that does not require props to be passed when called?

The output.library.type variable in WebPack is not defined

Is there a way to disable the useMutation function once it has successfully completed its

Creating an array using the variables in a class

A TypeScript solution as an alternative to express-ws

checking if the regex pattern matches every input

Selecting the appropriate color code based on a specified value