Using iframe tag in react application with local html file

Question

What is the best way to use iframe in react application, while having local html file for ifram src.

I need to have an iframe in my react application, but the iframe does not work with my local html file.

function ClusterDetails() {

  return (
    <iframe title='mytitle' src="../../data/index.html" width='500px'  height='500px'></iframe>
  );
}

export default ClusterDetails;

Answer 1

I found the solution. The source of iframe should be placed in public folder. the src attribute of iframe should be addressed related to public folder.

For example if there is a data folder containing index.html file, in public folder, then the src should be set as 'data/index.html'