Imagine yourself relaxing and indulging in a feast with various mouth-watering meats, delightful wines, and enjoying the company of a plethora of whores. Now, let's use this as an analogy to describe useState, something I wrestled with for a bit longer than I care to admit. Id like to use this forum to flesh out my current understanding of useState : In our gluttonous analogy, let's imagine a magical plate called useState sitting in front of us. This plate is extraordinary because it can be filled with all sorts of delectable meats, from the most exotic ones or the finest wines of various vintages. The only limit here is our imagination. But for now, just like my broken heart, the plate is empty, representing the initial state.

Now, we have two helpful triggers named eat and setEat. If we want to see what's currently on the plate (the current state), we can simply check what eat is serving us. And when we desire to change what's on the plate, we have a whore of a hostess called setEat. We can ask her to serve us something new, and she'll make sure the plate is filled accordingly.

Let's illustrate this with an example. We have a function called snackHub, where we set up our magical plate useState with eat and setEat triggers like this:

const [eat, setEat] = useState(pig);

We start the feast by putting 'pig' on the plate as the initial state. So, when we load our app, this delightful suckling 'pig' will be on display.

Should you wish for a drop of wine, using the power of setEat, we can ask our hostess to serve us some 'vino' by passing it as an argument. The plate updates, and now we have a delightful glass of wine.

lets flesh this out a little more. Once you understand this simple concept of useState, you can use it as a foundation to create more complex functions and interactive webpages.

Now, let's talk about 'manual routing.' my dear friend, who has been my mentor in this realm, has provided me with a progressive thought out structure to start understanding javascript and to simplify the steps to this point had been:

1. Create a React app.:
2. Create different files representing pages like home, blog, contact, etc.:
3. Play around with Tailwind CSS to make things visually appealing.:
4. And now, the exciting part – create a manual router using useState.

I must admit, setting up the page routing function using useState was a challenge. But through this endeavor, I had started to understand and discover other fundamental programming concepts, like working with variables, objects, and passing components around.

My mentors teaching style was hands off after a healthy explaination introducing topics. this style helped me grasp programming principles deeply, separating the wheat from the chaff. When I reached the stage of understanding Tailwind CSS, he gave me a simple instruction: 'Create a router that links the header elements home/blog/contact to their respective pages using useState, and explore passing props to children.' or something to that effect. i started grinding away and checking in with him showing progress where he would carefully direct me to topics i may want to review, all without spoon feeding the answer which kept me engaged and driven to proceed.

In the end, I successfully created an app with seamless page navigation using useState. Admittedly, I overthought the solution initially, trying hyperlinking calls that wouldn't directly update the state but actually re render the DOM, going against the spirit of React. It was here where I recieved the valuable coaching moment that taught me the art of passing props to update state.

once i had digested all of this i had come out with a better understanding of the fundamentals and how to manipulate elements to render states and setup functions within the default functional component to do all kinds off different things