How to render a react component inside a react component every time a button is clicked?

I am pretty new to React and am working on a Nextjs app. I am having problem with rendering a react component every time a button is clicked – the component just does not show. However when I inspect the page and log the very component, it shows up that it is returned as it should be by the function for this purpose. I am using react hooks – useState and useEffect. What I want to be happening is, every time the button “+” is clicked, a new NeededProductsField component to show up. It is a simple form for adding a recipe from a user. I wonder if somebody could help. Thank you!

How can i auto refresh or render updated table data form database in material UI table after doing any operation in React?

Here useVideos() give us all videos form database. After adding a new video the new entry is not append in the Material UI table , but if I refresh the page then it’s showing that new entry. Now I want to show this new entry after add operation. Please help me to do this! Thanks in Advance.

Reactjs handleclick binding in a nested map not working

I am writing a simple blog component in React. The component get the post from a second file and renders the content and the hashtags with map (in particular two nested map). I was trying to create a part in which the hashtag are highlighted when clicked, and hence I was following the snippet of the answer to this question. The fact is that it is not working and in particular what it is not working is the binding through bind (checked with console.log output)