I want to replace element in jsx e.g react tiny Link npm is rendering this
<div>
<header>
header
</header>
hello
<footer>
footer
</footer>
</div>
and i want to replace header and footer tag with div like this
<div>
<div>
header
</div>
hello
<div >
footer
</div>
</div>
react tiny link here and Im working on accessibility in React application its creating this above code but this deque extension raising issue that you can't have multiple header on same page. the first main header is created by me Im also having other issues like role="rowgroup" which are on other pages"
Normally you don't want to replace a semantic html element such as a <header> with a non-semantic element such as a <div> or <span>.
A <header> typically contains the main navigation to a page and is displayed at the top.
The official HTML 5.3 spec for <header> does not say that you can't have more than one <header>, although it would be unusual and not a best practice to do so.
However, a <header> has a default role of banner as long as it's not a child element of an <article>, <aside>, <main>, <nav> or <section> element, and the banner role says:
Within any document or application, the author SHOULD mark no more than one element with the banner role.
The key here is the word "SHOULD", meaning it's recommended that you shouldn't have more than one banner but it's not strictly prohibited.
So with all that being said, if you are trying to change your <header> to a <div> because an accessibility tool is flagging it as an error, then that tool is incorrect. If the tool is marking it as a warning or something you should manually verify, then you can ignore the warning if you have a good reason for having two <header> elements.
I know this doesn't answer your main question of how to change it, but it might make your question irrelevant if you don't need to change it.