Send catch error state from child to parent and show message - reactjs

Question

I have a page with 2 different containers that each of them make a data request but if fails I want replace ALL page with a big error message in the middle of the page, all blank
If User catch any error, should fail everything and not just show the message where is, but replace all UserApps code, User and UserProjects will be replaced by the big blank page with error message in the middle
(this is just an example):
Parent Component - UsersApp.tsx
import React, { FC } from "react"
import User from "../containers/User"
import UserProjects from "../containers/UserProjects"
const UsersApp: FC = () => {
return (
<>
<div>
<h1>Welcome!</h1>
</div>
<hr />
<div>
{/* //this error must be from child <User/> catch error component */}
{error ? (
<ErrorState />
) : (
<User />
<UserProjects />
)}
</div>
</>
)
}
export default UsersApp
Child Component - User.tsx
import React, { FC, useState, useEffect } from "react"
import { getUserData } from "../requests/getUserData"
const User: FC<{}> = () => {
const [error, setError] = useState(false)
const [loading, setLoading] = useState(false)
const [name, setName] = useState("")
const [age, setAge] = useState("")
const [country, setCountry] = useState("")
const getData = async () => {
setLoading(true)
setError(false)
const response = await getUserData()
const data = response.data
return data
}
useEffect(() => {
getData()
.then((data) => {
setName(data.name)
setAge(data.age)
setCountry(data.country)
})
.catch((error) => {
setLoading(false)
setError(true)
})
return
}, [])
return (
<div>
<h1>{name}</h1>
<p>{age}</p>
<p>{country}</p>
</div>
)
}
export default User
ErrorState.tsx
import React, { FC } from 'react'
const ErrorState: FC = (props) => (
<div>
<h1>Something went wrong!!!!! </h1>
</div>
)
export default ErrorState

Answer 1

Your parent needs to hold the error state. Pass the setError as a prop to the children
const UsersApp = () => {
const [error, setError] = useState(false)
return (
<>
<div>
<h1>Welcome!</h1>
</div>
<hr />
<div>
{error && <ErrorState/>}
{!error && (
<User setError={setError} />
<UserProjects setError={setError} />
)}
</div>
</>
)
}
const User = ({ setError }) => {
//remove set error state from child
}
const UserProjects = ({ setError }) => {
//remove set error state from child
}

Answer 2

You can use Error Boundaries, it will catch all the errors.