Submitting a form in React typescript

Question

I am trying to submit a form to my local database but I keep receiving an error message:

:Error: Objects are not valid as a React child (found: Error: Network Error). If you meant to render a collection of children, use an array instead

Could anyone give me some insight on what's going on and how I could fix it? Here's the code:

import axios from 'axios';
import type  { FC } from 'react';
import { useState } from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import './AgentForm.css';

interface IFormInputs {
    firstName: string;
    lastName: string;
    photoUrl: string | null; 
    agentLicence: string; 
    address: string; 
    practiceAreas: string;
    aboutMe: string | null;
}

const AgentForm: FC = () => {
    const { register, handleSubmit, formState: {errors} } = useForm<IFormInputs>();
    const [error, setError] = useState<string>("");
    const [eventCreated, setEventCreated] = useState<boolean>(false);

    const submitForm: SubmitHandler<IFormInputs> = async (agent: IFormInputs) => {
        if (!agent.photoUrl) {
            agent.photoUrl = null;
        }
        if (!agent.aboutMe) {
            agent.aboutMe = null;
        }
        // console.log(JSON.stringify(agent))

        try {
            await axios.post('http://localhost:3001/agents', JSON.stringify({
                firstName: agent.firstName,
                lastName: agent.lastName,
                photoUrl: agent.photoUrl,
                agentLicence: agent.agentLicence, 
                address: agent.address, 
                practiceAreas: agent.practiceAreas,
                aboutMe: agent.aboutMe
            }));
            setEventCreated(true);
            setError('');
        } catch (error) {
            setError(error);
        }  
    }

  return (
    <>
        {eventCreated && <div className='event-created'>Event Created</div>}
        {error && <div className='error'>{error}</div> }
        <form 
        onSubmit={handleSubmit(submitForm)}
        className={'agent-form'}
        >
            {/* first name */}
            <label htmlFor='firstName'>First name</label>
            <input
                {...register('firstName')}
                id='firstName'
                className='form-control'
                type='text'
                placeholder='Joe'
                required
            />
            {errors.firstName && <span>This field is required</span>}
            {/* last name */}
            <label htmlFor='lastName'>Last Name</label>
            <input
                {...register('lastName')}
                id='lastName'
                className='form-control'
                type='text'
                placeholder='Persons'
                required
            />
            {errors.lastName && <span>This field is required</span>}
            {/*  photo url*/}
            <label htmlFor='photoUrl'>Photo Url</label>
            <input
                {...register('photoUrl')}
                id='photoUrl'
                className='form-control'
                placeholder='https://unsplash.com/photos/KBzb07tXYWA?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink'
                type='text'
            />
            {/* agent license */}
            <label htmlFor='agentLicence'>Agent License</label>
            <input
                {...register('agentLicence')}
                id='agentLicence'
                className='form-control'
                type='text'
                placeholder='123456'
                required
            />
            {errors.agentLicence && <span>This field is required</span>}
            {/* address */}
            <label htmlFor='address'>Address</label>
            <input
                {...register('address')}
                id='address'
                className='form-control'
                type='text'
                placeholder="555 Some Place Rd, Los Angeles, CA 90077"
                required
            />
            {errors.address && <span>This field is required</span>}
            {/* practice areas */}
            <label htmlFor='practiceAreas'>Practice Areas</label>
            <input 
                {...register('practiceAreas')}
                id='practiceAreas'
                className='form-control'
                type='text'
                placeholder='Los Angeles, San Francisco, Miami'
                required
            />
            {errors.practiceAreas && <span>This field is required</span>}
            {/* about me */}
            <label htmlFor='aboutMe'>About Me</label>
            <textarea
                {...register('aboutMe')}
                id='aboutMe'
                className='agent-text-area'
            />
            <button className='submit-agent' type='submit'>Submit</button>
        </form>
    </>
  );
};

export default AgentForm; 

Answer 1

Looks like the error come from this line:

        {error && <div className='error'>{error}</div> }

because {error} is not a valid react child.

You can probably use something like this instead:

        {error && <div className='error'>{error.toString()}</div> }

You should then be able to see the real submission error.

Answer 2

Looks like it's the error reference near the top of your component markup:

  return (
    <>
        {eventCreated && <div className='event-created'>Event Created</div>}
        {error && <div className='error'>{error}</div> }
        {/*                          here ^^^^^ */}

As it says, "Objects are not valid as a React child" and error is an object. Either reference a property of error (e.g. something like error.message) or try error.toString().