React + Tailwind + Vite

I've re-used some of the components from the previous exercise.

To verify the fields, react-hook-form comes in clutch once again.

My question for this exercise: I'm repeating the same code in the <input ...../> part four times. They're quite similar, so would it make sense to create another component? Will it affect the overall performance of my app by doing so as I'll be calling the component to render it and also calling my <Errors ... /> component four times.

My </Errors /> component takes a prop like so:

• if it's a non-email field: <Errors word={"Last Name"} />

• if there's an email field: <Errors email={"true"}

and then render it conditionally in the component below:

{props.email ? ( <div>Looks like this is not an email</div> ) : ( <p>{props.word} cannot be empty</p> )}

Any improvement and feedback you could give me, please do so :)

Only 4 novice exercise left 🎉