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? <a target="_blank" className="preview" href={() => history.push(`mypages/preview/$data.attributes.html`)}>Preview</a> — srWebDev
– srWebDev, Commented Sep 5, 2021 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
– Heretic Monkey, Commented Sep 5, 2021 at 20:25
@HereticMonkey check updated qn, I have added a screen short — The Dead Man
– The Dead Man, Commented Sep 5, 2021 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
– The Dead Man, Commented Sep 5, 2021 at 20:31

Ameya Pai · Accepted Answer · 2021-09-06 07:02:19Z

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 6, 2021 at 7:02

answered Sep 5, 2021 at 21:04

Ameya Pai

111 silver badge3 bronze badges

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

1 Comment

Ameya Pai Over a year ago

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 github.com/paiameya/react-new-page-redirection @TheDeadMan

Collectives™ on Stack Overflow

how to create page url preview in react js?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related