"What if you can merge them together?"
So I tried this:
It's pretty self-explanatory, but essentially I define a
useErrors function that creates an
error state. Then, within that same function, I create an
Error Component, which checks if an error exists. If no error exists, it is set to false; any other value would mean that there is an error.
Error Component renders accordingly, and the
useErrors function returns that
Error Component, along with the
useErrors function is handled 4 ways:
import useErrors from "./useErrors"; - imports the function.
const [Error, setError] = useErrors(false); - creates the Error state, passing in the default error value (a value of false is automatically hidden), and returns the
Error Component, as well as the
setError([<value> | false); - invokes the function to set the error message. A value of false is hidden; any other value is displayed as the error message.
<Error /> - the JSX to render the error message. (Notice no props are sent, yet it works?)
When running the code, the error is displayed:
And, when ready, it can be closed (which just sets the
error state to false)
To further test, we can create a loop that sets random error messages and clears them:
It even works when you create multiple
Error States (different names for different messages), and you could reuse the same
Error Component multiple times on the page and it'll React the same for that
But... how? Why?
From my understanding,
React Components are reusable, either if they're functional or class-based. And the usual way data is sent/updated per Component is either through
props. So how does a variable from a parent function run down into that Component, while being unique to that one instance of error message?
Until I've successfully created commenting on posts to this website, you can find me on Twitter @danidre or join my Discord server. Feel free to message me on the Nodeiflux server and share your thoughts!