API calls and the mistake that breaks your forms
Relying on onClick for API calls often breaks form behavior. Learn why Fetch handles errors differently than Axios and how to manage status codes.
Best quote from API calls and the mistake that breaks your forms
Controlled components are what separate professional apps from amateur ones because they allow for real-time feedback. React should be the single source of truth, creating a perfect loop between the state and the user's input.
This audio lesson was created by a BeFreed community member
Backend - API Development: API fundamentalsYour first API endpointHTML formsHTML inputsReact controlled formsAPI callsAxios (HTTP client)HTTP status codesError handling & messagesOptional chaining operator
Frequently Asked Questions
Using "onSubmit" on the HTML form element allows you to tap into the web’s natural behavior, such as triggering a submission when a user hits the "Enter" key. It also enables automatic browser validation features. When using this method, it is essential to call "event.preventDefault()" to stop the page from reloading, which would otherwise cause the application to lose its current state.
A major misconception is that Fetch and Axios handle server errors the same way. Fetch only rejects a promise if there is a network failure; it actually considers HTTP 500 server crashes or 404 errors as "successful" resolutions. Axios, however, is designed to automatically treat any status code outside the 2xx range as an error, allowing developers to catch server-side issues directly within a "catch" block.
Controlled components are form elements where React acts as the "single source of truth" for the input's value. Instead of the browser's DOM holding the text, the value is tied to a specific piece of React state, and an "onChange" handler updates that state with every keystroke. This approach is preferred because it allows for real-time feedback, such as instant field validation, password strength meters, or automatic phone number formatting.
When a request fails backend validation, FastAPI returns an HTTP 422 Unprocessable Entity error. The response body contains a "detail" array that specifies the exact location of the error, such as a specific field name, and a message explaining the issue. Developers can map these specific server-side errors back to the React form state to display helpful, inline error messages directly under the relevant input fields.
When an API call begins, developers typically set a "loading" state to true to disable the submit button and prevent duplicate entries. If the loading state is only set to false in the success path, a server error could leave the button disabled forever, trapping the user. Using a "finally" block ensures that the loading state is reset to false regardless of whether the call succeeded or failed, allowing the user to try again.
Discover more
Master API Fundamentals and Postman Skills
Master API Fundamentals and Postman Skills
This learning plan is essential for developers and QA engineers looking to bridge the gap between basic coding and professional backend engineering. It provides a comprehensive roadmap from foundational HTTP concepts to advanced microservices patterns and automated testing in Postman.
Design successful apps that users love
Design successful apps that users love
In today's competitive app market, user experience often determines which products thrive and which fail. This learning plan equips designers and product managers with essential UX principles and psychological insights to create apps that users genuinely want to use repeatedly.
Agentic Ai app builder
Agentic Ai app builder
As AI evolves from passive chat interfaces to active problem-solvers, mastering agentic systems is becoming a critical skill for modern developers and entrepreneurs. This plan is ideal for non-technical innovators and aspiring AI builders who want to create autonomous applications without deep coding knowledge.
deep react knowledge
deep react knowledge
React continues to dominate the frontend development landscape, but mastering its core concepts and advanced patterns is essential for building professional-grade applications. This learning plan is ideal for developers who have basic JavaScript knowledge and want to become proficient React engineers capable of building complex, performant applications.
Learn about AI
Learn about AI
As artificial intelligence reshapes every industry, understanding its technical foundations and ethical boundaries is essential for modern professionals. This path is ideal for aspiring developers and tech-curious individuals looking to transition from basic theory to building functional, responsible AI systems.
Break unhealthy attachments
Break unhealthy attachments
Unhealthy attachments and codependency can trap you in cycles of emotional dependence and unfulfilling relationships. This learning plan helps anyone struggling with relationship patterns that diminish their sense of self, providing practical tools to break free and build healthier connections.
Viral lyric-based emotional messaging app UI
Viral lyric-based emotional messaging app UI
This learning plan is essential for designers and product managers looking to break into the competitive social media space by leveraging emotional resonance. It combines high-level UI/UX fundamentals with the specific mechanics of viral growth and music-driven storytelling.
Build dog grooming & yoga web/app guide
Build dog grooming & yoga web/app guide
This comprehensive guide is designed for aspiring developers and entrepreneurs looking to merge wellness and pet care into a digital platform. It bridges the gap between technical execution and niche industry expertise, making it ideal for those wanting to build a specialized, professional-grade application.
From Columbia University alumni built in San Francisco
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
From Columbia University alumni built in San Francisco
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
