How can I add html Element Attributes in react

Question

How can I add an attribute to html element in React js. I want to set <html lang="en"> to solve WCAG Level A validation issue.

I added html-element-attributes module but no idea about how to use it.

Anybody please help to get a way to add this lang attribute to html element?

It's kinda unusual for React to control the entire document, it's normally rendered into an element on an already existing page in which case that would be set in the template for the page and not by React. Can you elaborate on what you're trying to do? — ivarni
– ivarni, Commented Aug 4, 2017 at 6:14
WCAG validation is showing an error to add lang attribute for html. SoI am trying to add this. — Prajila V P
– Prajila V P, Commented Aug 4, 2017 at 6:18
Yes, I understand that but are you sure your <html> element is managed by React? Without knowing what your setup is it's very difficult to know how to fix this. — ivarni
– ivarni, Commented Aug 4, 2017 at 6:23

Fawaz · Accepted Answer · 2017-08-04 06:21:44Z

5

you need React helmet for this. Put this block in any top level component's render:

<Helmet>
  <html lang="en" />
</Helmet>

answered Aug 4, 2017 at 6:21

Fawaz

3,5603 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aras · Accepted Answer · 2022-10-03 15:36:47Z

I added the lang property directly by creating a div surrounding the code on my app.js file.

  return (
    <Provider store={store}>
      <CacheProvider>
        <div lang='en'>
          <Head>
            ...
          </Head>
          <SidebarProvider>
            <ThemeProvider>
              <LocalizationProvider dateAdapter={AdapterDateFns}>
                <CssBaseline />
                {getLayout(<Component {...pageProps} />)}
              </LocalizationProvider>
            </ThemeProvider>
          </SidebarProvider>
        </div>
      </CacheProvider>
    </Provider>
  );

I am sharing the complete code in order to give the context. The only difference I made for this purpose was to add the div.

Collectives™ on Stack Overflow

How can I add html Element Attributes in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related