Change the page HTML on button click React

Question

So I have an already written heapsort animation [here][1] with JS/Jquery + HTML+ CSS. We are currently rebuilding +expanding the project in React. I don't know it (or web technologies in general), and so far I've managed by working on the DS while my partner does the react specific things+ animations. I've been given the green light to just use the heap animation since he liked it too. I've been banging my head trying to integrate the HTML file in to react. Trying iframe, window.location, and the other SO things just haven't worked for me. This is why I'm going with the approach of trying to set the HTML code to my HTML file when I click it.

The directory structure is:

heap.js

heapsort (dir) (copied from project):
a)index.html
b)static (dir):

 i)styles.css <br> 
 ii)style.css <br>
 iii)heaper.js (does the actual animation work) <br>

I'd like to do something where a button click in heap.js will load up the index.html. If that can load up correctly, everything should work smoothly.

function create(){
    //set HTML->./heapsort/index.html
    window.location="./heapsort/index.html" //does not work despite going to the correct path
    
  }

Edit: added code
Heap.js (everything except the create function works as is supposed to)

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
// import  { Component } from 'react';
// import Page from './heapsort/index.html';

import VisualPage, {
  About,
  Complexity,
  Controls,
  ControlGroup,
  Visualization,
} from '../VisualPage.js';
import './Styles/queue.css';

export function Heap(props) {
  return (
    <div className="heap">
      {props.children}
    </div>
  );
}


export function QueueNode(props) {
  return (
    <CSSTransition
      appear
      in={props.show}
      onExited={props.onExited}
      timeout={200}
      unmountOnExit
      classNames="queue-node"
    >
      <div className={"queue-node" + (props.highlight ? " highlight" : "")}>
        {props.children}
      </div>
    </CSSTransition>
  );
}


function Demo() {
  const [list, setList] = useState([]);
  const [length, setLength] = useState(0);

  

  function onExited() {
    setList(list.slice(1));
  }

  function create(){
    //set HTML->./heapsort/index.html
    // window.location="./heapsort/index.html" //does not work despite going to the correct path
    window.location.replace("./heapsort/index.html")

  }

  
  return (
    <>
      <Controls>
      <ControlGroup>
          <label htmlFor="create">Len of randomized array</label>
          <input name="add" type="text" onChange={e => setLength(e.target.value)}></input>
          <button onClick={create}>Create Array</button>
        </ControlGroup>
        
      </Controls>
      <Visualization>
        <Heap>
          {list.map((node, i) => {
            return (
              <QueueNode
                key={i}
                index={i}
                show={node.show}
                highlight={node.highlight}
                onExited={onExited}
              >
                {node.value}
              </QueueNode>
            );
          })}
        </Heap>
      </Visualization>
    </>
  );
}

export  default function QueuePage(props) {
  return (
    <VisualPage title="Array">
      <About>
        <h4>What is a Heap?</h4>
        The bane of my existance. 
      </About>
      <Complexity complexity={[
        {
          "name": "Indexing",
          "complexity": "Θ(1)"
        },
        {
          "name": "Set Element at Index",
          "complexity": "Θ(1)"
        },
        {
          "name": "Average wasted space",
          "complexity": "Θ(1)",
        },
      ]} />
      <Demo />
    </VisualPage>
  );
}

```<br>
Index.html

-->

  <input type="number" id="len" placeholder="Insert length of randomized array"></input>
    <button id="click">Generate Arr of Length</button>
    <button id="Refresh" onclick="refresh()">Refresh</button>

var myLink = document.getElementById('click'); function refresh(){ location.reload(); } myLink.onclick = function () { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "./static/heap.js"; document.getElementsByTagName("head")[0].appendChild(script); return false; } ``` [1]: https://dl1683.github.io/DataStructuresInJavaScript/ds/heapsort/index.html

Anish Sapkota Anish Sapkota · Accepted Answer · 2020-06-28T15:18:18

window.location doesn't redirect to another page. You must use window.location.replace()

function create(){   
    window.location.replace("./heapsort/index.html")
}

Change the page HTML on button click React

1 Answers