re-render | A react component library for Android , IOS and Web | Frontend Framework library

I know this question has been asked multiple times but I cannot seem to find an answer. I have a component named DynamicTable which renders JSON as a data table. It has been tested in multiple other pages and works correctly. Here I have put it into a React-Bootstrap tab container. The data pull works correctly but the page is not re-rendering when the fetch is complete.

Here is the code I am using

I'm trying to return just the first fruit/color data from this read-only example JSON:

I am building an app with reactjs tha needs to be real-time and I am using Rails Actioncable as a wrapper around websocket.

I can receive data via websocket after a record is created or updated and when I do console log to see what is contained in the posts array created with useHook but updated via webhook. It seems the post array is updated correctly using the code shown below. However react does not re-render the web page hence the use does not see that updated record.

I am trying to update my fetch, when new inputs come from this.state.values, but it does not work when using a textInput but re-renders when i manually place value in the this.state.values

I'm working on a feature where client get's discount when buying a package.

The item on the left is fixed and doesn't change. It comes in package with the item on the right where client can choose a snowboard:

All I need is that when client chooses a size, but then swipes to the next snowboard the size chosen from the previous snowboard would be set back to default 'CHOOSE SIZE OPTION'.

Here is the code of the Parent Component:

I created a React custom hook which listens to firestore database, i followed the documentation in firebase website but I'm having trouble when I re-render the component. When I refresh my app the useEffect hook runs correctly but the listener inside unsubscribe() method doesn't. Here is the full code of the hook.

It works fine when the code recompiles itself after I save something in a component (first-render), but when it re-renders it shows as it if was always loading but it never executes the listener. Hope you can help me!

In similar question, the solution is to use an unique value instead of index of map as the 'key' prop when looping through the array to render components. However, it not working for me as the remaning components still rerender after i delete an element from the array. What am i missing here?

Here is my attempts，which is not working as expected：

App.js

I have spent the better part of three days trying to get a Open Graph image generator working for my Next.js blog. After getting frustrated with hitting the 50mb function size limit I changed away from an API to a function call in the getStaticProps method of my pages/blog/[slug].tsx. This is working but now the issue is with the meta tags. I am dynamically setting them using the image path from the image generation function as well as information from the respective post. When I view the page source, I see all the appropriate tags and the open graph image has been generated and the path works but none of these tags are seen by crawlers. Upon checking the source file I realized that none of the head tags are pre-rendered. I am not sure if I am not understanding exactly what SSG does because I thought it would pre-render my blog pages (including the head). This seems like a common use case, and although I found some relevant questions on SO, I haven't found anyone really answering it. Is this an SSG limitation? I have seen tutorials for dynamic meta tags and they use SSR but that doesn't seem like it should be necessary.

I am having following code: