how to create page url preview in react js?

Question

I have a react page builder, I am displaying user-created pages using dangerous HTML now I want when the user clicks a button preview to open this page on a new window.

Here is my component to display user pages

import React, { useState, useEffect} from "react";
import api from "../utils/api";

function MyPages() {
  const [MyPagesList, setMyPagesList] = useState();

  const getMyPages = async () => {
    try {
      const response = await api.get("/pages");
      setMyPagesList(response.data.data);
    } catch (error) {}
  };

  useEffect(() => {
    getMyPages();
  }, []);

  return (
        <div className="all-mypages">
          <div className="all-mypages__cards">
            {MyPagesList && MyPagesList.map(function (data, id) {
                return (
                  <div  className="mypages-card" key={id}>
                    <a className="mypages-card__link">
                      <div className="mypages-card__content"
                        dangerouslySetInnerHTML={{__html: data.attributes.html}}></div>
                    </a>
                    <button className="preview " onClick={()=>history.push(`/mypages/preview/${data.attributes.html}`)>Preview</button>
                  </div>
                );
              })}
          </div>
        </div>
  );
}

export default MyPages;

When user clicks preview button here is what I get

My solution is not working and I am out of ideas, what do I need to do to solve this issue?

Have you tried this rather than a button? ` history.push(\`mypages/preview/$data.attributes.html\`)}>Preview` — srWebDev, Sep 05 '21 at 20:25
What does "not working" mean? Are there errors? Do things not show? Have you checked the Network Tools to see if the request for "/pages" is getting made? — Heretic Monkey, Sep 05 '21 at 20:25
@HereticMonkey check updated qn, I have added a screen short — The Dead Man, Sep 05 '21 at 20:29
@srWebDev that does not matter if its a button or a URL the result is the same, check new update on qn — The Dead Man, Sep 05 '21 at 20:31
From a quick glance, it's doing exactly what you're telling it to: appending the raw HTML onto the end of the URL. I'm not sure what you want it to do. — Heretic Monkey, Sep 05 '21 at 20:34
@HereticMonkey is just a HTML I want to display on this page instead of being rendered in displayed on URL, I cant paste it here its big, — The Dead Man, Sep 05 '21 at 20:35
@HereticMonkey agreed its doing exactly what is supposed to do, now I am asking how can I display this HTML as page on click ? — The Dead Man, Sep 05 '21 at 20:36
This looks similar: https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component — srWebDev, Sep 05 '21 at 21:02
@srWebDev its not the same , most of the answers there it seems like they want to display a HTML page inside another component, for me, I want to display this HTML as page in preview, — The Dead Man, Sep 05 '21 at 21:12

Ameya Pai · Answer 1 · 2021-09-06T07:02:19.193

0

The result is correct, because you are appending the html to /mypages/preview/. If you want the data.attributes.html ( which is the user html content ) to be displayed on a new page then:

Create another React component which looks for this html content from ~~localStorage~~ redux
When clicked on the preview button open a new page with url in react router pointing to this component
This component on load will get the localStorage html content and pass it to its dangerouslySetInnerHtml and display it.

edited Sep 06 '21 at 07:02

answered Sep 05 '21 at 21:04

Ameya Pai

11
1
3

I had to use a global state management because if you want to open a react component in a new page, passing the html as a route parameter or storing it in localStorage is not a good idea. Also data is hardcoded because I didn't have time to setup a mock api server. Link to the solution https://github.com/paiameya/react-new-page-redirection @TheDeadMan – Ameya Pai Sep 06 '21 at 06:56

how to create page url preview in react js?

1 Answers1