reactJS open a .pdf file from an external repository - reactjs

I have a reactJS application hosted on AWS in an S3 instance. I also have a web site hosted on AWS in a different S3 instance. On the web site, I host a bunch of .pdf files. Lets assume I have 3 .pdf files located at:
https://www.mywebsite.com/pdffiles/file001.pdf
https://www.mywebsite.com/pdffiles/file002.pdf
https://www.mywebsite.com/pdffiles/file003.pdf
Is there a way for me to provide my reactJS application users with a series of links to the external .pdf files? I tried the following code:
renderDocuments = () => {
return (
<div>
<div className="documents_background">
<div className="row">
<div className="col-12 text-left text_14">
<label>Below are the links to the participant forms we have available for download. The forms are
in .pdf format. You will need to have Adabe Acrobat Reader installed in order to view these files.</label>
</div>
</div>
<div className="row">
<div className="col-9 text-left text_14">
<label>Form 1</label>
</div>
<div className="col-2 text-right text_14">
<a href="https://www.mywebsite.com/pdffiles/file001.pdf" Target="_blank" >Download</a>
</div>
<div className="col-1">
</div>
</div>
<div className="row">
<div className="col-9 text-left text_14">
<label>Form 2</label>
</div>
<div className="col-2 text-right text_14">
<a href="https://www.mywebsite.com/pdffiles/file002.pdf" Target="_blank" >Download</a>
</div>
<div className="col-1">
</div>
</div>
<div className="row">
<div className="col-9 text-left text_14">
<label>Form 3</label>
</div>
<div className="col-2 text-right text_14">
<a href="https://www.mywebsite.com/pdffiles/file003.pdf" Target="_blank" >Download</a>
</div>
<div className="col-1">
</div>
</div>
</div>
</div>
)
}
when I click on the hyperlink for form 1, I get the following in the console.log:
Resource interpreted as Document but transferred with MIME type application/pdf: "https://www.accurecord-direct.com/dotnet/PDFFILES/VSTA/vstm_enrollment_form.pdf"
The .pdf file does not open and the application just sits there waiting.
Thanks.

Related

How do you swap a component with another after onclick event?

Below, I have a code that is eventually rendered as a route in a react, single page, app. What I was hoping to get, was that depending on what div was clicked, each applying a 'filter', that the component variable, will change components, based off what was imported.
import React from "react";
import { useState } from 'react';
import UpperLevel from "./UpperLevel";
import Grid from "./Grid";
import GridCardio from "./GridCardio";
import GridHome from "./GridHome";
import GridGym from "./GridGym";
import GridUpper from "./GridUpper";
import GridLower from "./GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
function ExercisesLauncher() {
const component=<Grid/>;
function applyCardio() {
const component=<GridCardio/>
}
function applyGym() {
alert( "GymClicked" );
}
function applyHome() {
alert( "HomeClicked" );
}
function applyUpper() {
alert( "UpperClicked" );
}
function applyLower() {
alert( "LowerClicked" );
}
return (<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" onClick={applyGym} class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" onClick={applyHome} class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" onClick={applyUpper} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" onClick={applyLower} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
//THIS WILL CHANGE BASED ON CLICKS
{component};
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
}
export default ExercisesLauncher;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
So far, I added alerts to make sure the server recognized these div elements being clicked, now, I just wish to apply the respective component to the body after a div is clicked. The main grid component does load where {component} is, which is perfect, I just do not know why the GridCardio component is not switching out the Grid component
Rather than loading Grid into a component, that is loaded into another component, I used in my App2 to load the page(compiled everything pertaining to this page) and came up with this script, which was a lot easier than I thought it would be. I learned that I had to rerender my components! This does exactly what I needed! I had a lot of unnecessary components and this was the best approach in my opinion. I am also trying to get my mind used to using arrow notation, so do not mind the "function's
import React, { useState } from 'react';
import {render} from 'react-dom';
import NavBar from "./components/NavBar";
import Grid from "./components/Exercises/Grid";
import GridCardio from "./components/Exercises/GridCardio";
import GridHome from "./components/Exercises/GridHome";
import GridGym from "./components/Exercises/GridGym";
import GridUpper from "./components/Exercises/GridUpper";
import GridLower from "./components/Exercises/GridLower";
const marginAuto = {
margin: "auto"
};
const cursorPointer = {
cursor: "pointer"
};
//THIS IS ALL RESPONSIBLE FOR LOADING EVERYTHING IN ONE PAGE DONT WORRY ABOUT IT
function App2() {
// const [display, setState] = React.useState(<Grid/>);
let component = <Grid/>;
const [gridState, changePlease] = useState(component);
function applyHome(){
changePlease(<GridHome/>);
}
function applyCardio(){
changePlease(<GridCardio/>);
}
function applyLower(){
changePlease(<GridLower/>);
}
function applyUpper(){
changePlease(<GridUpper/>);
}
function applyHome(){
changePlease(<GridHome/>);
}
function applyGym(){
changePlease(<GridGym/>);
}
return (<section>
<NavBar/>
<main>
<section class="colored-section" id="title">
<div class="container-fluid">
<div class="row">
<div class="container-fluid main-text">
<h1 class="big-heading">Exercises</h1>
<p>
Below, feel free to navigate to whatever execrises you may find useful for your next workout. Either learn more about the exercise, or add it to your catelog to later add to your scheduler.
</p>
</div>
</div>
<h2 class="normal-heading mb-4">Group</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Gym" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyGym} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">Gym</h1>
</div>
<div class="card-body">
<p>You have equipment that is found at an ordinary gym.</p>
</div>
</div>
</div>
<div id="Home" class="col-lg-6 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyHome} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-heading py-1">
<h1 class="normal-heading">At Home</h1>
</div>
<div class="card-body">
<p>
Small, mobile, or convenient equipment that still has use.
</p>
</div>
</div>
</div>
</div>
<h2 class="normal-heading mb-4">Equipment</h2>
<div class="container-fluid row row-cols-1 row-cols-md-3 mb-3 text-center" style={marginAuto}>
<div id="Upper" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyUpper} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Upper Body</h1>
<p>
Includes the chest, arms, shoulders, and anything else above the waist.
</p>
</div>
</div>
</div>
<div id="Lower" class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} onClick={applyLower} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Lower Body</h1>
<p>
Includes the quadriceps, hamstrings, glutes, and anything else below the waist.
</p>
</div>
</div>
</div>
<div id="Cardio" onClick={applyCardio} class="col-lg-4 d-flex align-items-stretch">
<div style={cursorPointer} class="card w-100 mb-4 rounded-3 shadow-sm filter">
<div class="card-body">
<h1 class="normal-heading">Cardio</h1>
<p>
Any exercise that benefits the cardio-system that gets the heart pumpin.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="album py-5 black-section">
<div id="root" class="container">
{/* THIS WILL CHANGE BASED ON CLICKS */}
{gridState}
</div>
</div>
</section>
<footer id="footer">
<div class="container-fluid">
<a href="index.html">
{" "}
<img class="logo mb-3" src="https://raw.githubusercontent.com/fabianenavarro/Get-a-Grip/main/public/images/fist.png" alt=""/>
</a>
<p>2022 Getta Grip! LLC</p>
</div>
</footer>
</main>);
</section>);
}
export default App2;
You're tripping up on the way you're using your component variable. You don't want to re-declare the variable, you just want to assign a new value
function ExercisesLauncher() {
var component=<Grid/>;
function applyCardio() {
component=<GridCardio/>;
}
...

bootstrap cards do not line up horizontally in react

I have a problem with bootstrap cards, when I insert the code they just line up vertically, one below the other,
I do it by mapping a response
return (
<div className="container">
{array.map(name => (
< div class="card-columns ">
<div class='col'>
<div class="card ">
<img class="card-img-top" src=name.img" alt="Card image cap" />
<div class="card-body">
<h5 class="card-title"> name.title </h5>
<p class="card-text"> name.description</p>
</div>
</div>
</div>
</div>
))}
</div >
}
any way to align it so that it is next to each other?
please do it in this order
return (
<div className="container">
<div class="row">
{array.map((name) => (
<div class="col-sm-4">
<div class="card ">
<img class="card-img-top" src={name.img} alt="Card image cap" />
<div class="card-body">
<h5 class="card-title"> {name.title} </h5>
<p class="card-text"> {name.description}</p>
</div>
</div>
</div>
))}
</div>
</div>
}

Sections not displaying on React App or showing content that is supposed to be there

Hello I am making a React App and am not getting my content displaying within certain sections for localhost:3000. I believe it has to do with folders like CSS/JSS/Images being in the Public folder and not rendering properly to the SRC folder.
Even possibly when parts of code are within a . But I am struggling to find the reason for this.
My classes were all changed to 'className', but still same issue
import React from 'react';
import './App.css';
class App extends React.Component {
render() {
return (
<div className="App">
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<nav className="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target" id="ftco-navbar">
<div className="container">
<a className="navbar-brand" href="index.html">Digi<span>Lab</span></a>
<button className="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span className="oi oi-menu"></span> Menu
</button>
<div className="collapse navbar-collapse" id="ftco-nav">
<ul className="navbar-nav nav ml-auto">
<li className="nav-item"><span>Home</span></li>
<li className="nav-item"><span>Services</span></li>
<li className="nav-item"><span>Projects</span></li>
<li className="nav-item"><span>About</span></li>
<li className="nav-item"><span>Testimony</span></li>
<li className="nav-item"><span>Blog</span></li>
<li className="nav-item"><span>Contact</span></li>
</ul>
</div>
</div>
</nav>
<section id="home-section" className="hero">
<h3 className="vr">Welcome to DigiLab</h3>
<div className="home-slider js-fullheight owl-carousel">
<div className="slider-item js-fullheight">
<div className="overlay"></div>
<div className="container-fluid p-0">
<div className="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(./bg_1.jpg);">
<div className="overlay"></div>
</div>
<div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<div className="text">
<span className="subheading">Welcome to the digilab</span>
<h1 className="mb-4 mt-3">Small Details Make A Big <span>Impression</span></h1>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>
<p>Get in touch</p>
</div>
</div>
</div>
</div>
</div>
<div className="slider-item js-fullheight">
<div className="overlay"></div>
<div className="container-fluid p-0">
<div className="row d-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(images/bg_2.jpg);">
<div className="overlay"></div>
</div>
<div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
<div className="text">
<span className="subheading">Welcome to the digilab</span>
<h1 className="mb-4 mt-3"><span>Strategic</span> Design And <span>Technology</span> Agency</h1>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>
<p>Get in touch</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
}
This is what I am aiming to achieve:
enter image description here
And this is what I am getting in return:
enter image description here

How to resolve "Config must be specified for the HighchartsChart component" error?

Before inserting
<ReactHighcharts config={barchartdata}></ReactHighcharts>
<div className="col-md-6 mb-3">
<div className="card">
<div className="card-header d-flex">
<h5 className="card-title mr-auto"> Team Wise Total Revenue</h5>
</div>
<div className="card-body">
<figure>
</figure>
</div>
</div>
</div>
let barchartdata = this.state.reports.chartslist.charts[0];
console.log("databarchart", this.state.reports.chartslist.charts[0]);
I can able to get the data.
<div className="col-md-6 mb-3">
<div className="card">
<div className="card-header d-flex">
<h5 className="card-title mr-auto"> Team Wise Total Revenue</h5>
</div>
<div className="card-body">
<figure>
<ReactHighcharts config={barchartdata}></ReactHighcharts>
</figure>
</div>
</div>
barchartdata has following response too:
config must be specified error

Dynamically importing an svg in React

I have a dumb component that gets passed down props from a weatherAPI. I want to be able to dynamically change the SVG image depending on what gets sent back from the API. I have installed an npm module react-svg: https://github.com/atomic-app/react-svg. This has a dependency of svg-injector: https://www.npmjs.com/package/svg-injector which I have also installed. Now, I have imported react-svg -> import ReactSVG from 'react-svg';. I then implemented it with inside my dumb component:
const WeatherReport = ({report}) => {
return (
<div style={styles.body} className="row">
<div style={styles.weatherBoxContainer}>
<div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<ReactSVG path={'RELATIVE TO DOCUMENT ROOT I'M SERVING FROM'} callback={(svg) => console.log(svg)} />
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[0].main.temp_max)}°</div>
<div>{Math.floor(report.list[0].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[0].main.temp)}°
</div>
</div>
</div>
CA
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[1].main.temp_max)}°</div>
<div>{Math.floor(report.list[1].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[1].main.temp)}°
</div>
</div>
</div>
UT
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[2].main.temp_max)}°</div>
<div>{Math.floor(report.list[2].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[2].main.temp)}°
</div>
</div>
</div>
MN
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[3].main.temp_max)}°</div>
<div>{Math.floor(report.list[3].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[3].main.temp)}°
</div>
</div>
</div>
DC
</div>
<div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}>
<div style={styles.weatherBoxContainer.weatherReport}>
<div className="row" style={styles.weatherBoxContainer.temps}>
<div className="col-sm-4" style={styles.weatherBoxContainer.tempMinMax}>
<div>{Math.floor(report.list[4].main.temp_max)}°</div>
<div>{Math.floor(report.list[4].main.temp_min)}°</div>
</div>
<div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}>
{Math.floor(report.list[4].main.temp)}°
</div>
</div>
</div>
NY
</div>
</div>
</div>
);
};
WeatherReport.propTypes = {
report: PropTypes.object
};
export default WeatherReport;
Now, ReactSVG's path needs to be relative to the document root you're serving from NOT relative to the js file that contains ReactSVG. Simple enough right? However, I am using babel and everything is being served as JS, into one file. I am quite new to webpack, babel, react and redux for that matter... Any suggestions on how I am suppose to hit the path to my svg when everything is being compiled into one file?
Assuming the output from your build step in webpack is into a /dist/ folder off your root (for example) you would also want to have a build step to copy any other external files in that folder such as your svg file.
/dist
|- bundle.js
|- myart.svg
Then in your file you can reference the svg simply as
<ReactSVG path="myart.svg" />

Resources