When implementing tabs, think about it as accordion with different styling. It's nothing else, really. How you embed it in your React-App depends heavily on the overall structure.
From the top of my head: In your state, you could have an array of objects like {tabname, tabcontent, isActive}, which you could iterate over in your render-function. Output all tabnames, and only the active tab-content. Move all the tab-titles to the top via CSS, and attach a click-handler on each, to set all tabs inactive, and only that one active. The close-button could remove the entire object from the array.
This is kinda simplified but I hope you get the idea. Of course, if you need routing, rich content, components in the tab-content-area etc. it won't suffice. This would be an approach for tabs with only text-content.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
When implementing tabs, think about it as accordion with different styling. It's nothing else, really. How you embed it in your React-App depends heavily on the overall structure.
From the top of my head: In your state, you could have an array of objects like {tabname, tabcontent, isActive}, which you could iterate over in your render-function. Output all tabnames, and only the active tab-content. Move all the tab-titles to the top via CSS, and attach a click-handler on each, to set all tabs inactive, and only that one active. The close-button could remove the entire object from the array.
This is kinda simplified but I hope you get the idea. Of course, if you need routing, rich content, components in the tab-content-area etc. it won't suffice. This would be an approach for tabs with only text-content.