# Use the \<html2react> component

At the moment we have a problem with internal links in our content. For example, look at the post entitled *"Latest Trip to India"*. The link to *"New7Wonders of the World"* at the bottom of the post forces SSR and a page reload.

Another example can be found in the post entitled *"Shinjuku Gyoen National Garden"*. The link *"post about the Banff National Park"* also forces SSR and a page reload. More examples can be found on the *"About Us"* page.

Frontity provides a number of components, one of which is `<html2react>`. This enables us to process our content and replace HTML elements with React components.

We can use `<html2react>` to replace any `<a href="...">` links in our content with the `<Link>` component. You'll remember that we've previously used the `<Link>` component directly in our menu and in our list page.

Check the file `frontity.settings.js`. You should find that `"@frontity/html2react"` is already included in the `packages` array of our project.

First we need to import the link processor into our `<Root>` component, and also add it to the array of `html2react` processors on the `libraries` object.

Add this to the root level `index.js` file.

```jsx
// File: /packages/my-first-theme/src/index.js

import link from "@frontity/html2react/processors/link";

// ...
roots: {...},
state: {...},
actions: {...},
libraries: {
  html2react: {
    processors: [link]
  }
}
```

Now, for our `<Post>` component in `post.js` let's pass `libraries` in as a prop and get the component ready for use.

```jsx
// File: /packages/my-first-theme/src/components/post.js

// ...
const Post = ({ state, libraries }) => {
  // ...
  const Html2React = libraries.html2react.Component
  // ...
}
```

Finally, replace this:

```jsx
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
```

with this:

```jsx
<Html2React html={post.content.rendered} />
```

And now the internal links in our posts will update from the state and not force an HTTP request and hence a page reload.

You should also do the same for the `<Page>` component in `page.js`, which should ultimately look like this:

```jsx
// File: /packages/my-first-theme/src/components/page.js

import React from "react"
import { connect } from "frontity"

const Page = ({ state, libraries }) => {
  const data = state.source.get(state.router.link)
  const page = state.source[data.type][data.id]

  const Html2React = libraries.html2react.Component

  return (
    <div>
      <h2>{page.title.rendered}</h2>
      <Html2React html={page.content.rendered} />
    </div>
  )
}

export default connect(Page)
```

And now the links on the *"About Us"* page should work as expected as well.

> See [our docs here](https://docs.frontity.org/api-reference-1/frontity-html2react) for more on the `@frontity/html2react` package.

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/fb79e891113b879fe154d42c9f1fdb39270fa0f3).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tutorial.frontity.org/part7-finishing-touches/use-the-html2react-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.