import React from 'react';
import Navigation from "../components/Nagivation";
const Home = () => {
return (
<div className="home">
<Navigation/>
<div className="homeContent">
<div className="content">
<div className="pdf">
CV Download
</div>
</div>
</div>
</div>
);
};
export default Home;
The file is into app/public/media/AA.pdf
locally it works very fine, App.pdf is open. But on the AWS server, it doesn't. It opens www.aaaa.com/media/AA.pdf but error the page doesn't exist.
Added download attribute
CV Download
Related
I am trying to create a tab component with simple react state. But when using the
hidden
attribute the page start loading forever. Even if I restart the project the problem appears again.
import React, { useState } from "react";
const InventoryMain = () => {
const [tabIndex, setTabIndex] = useState(0);
return (
<div>
<div className="tabs">
<span onClick={()=> setTabIndex(0)} className="tab tab-lifted" >Tab 1</span>
<span onClick={()=> setTabIndex(1)} className="tab tab-lifted tab-active">Tab 2</span>
</div>
<div className="tab-contents">
<div className="tab-1" hidden={tabIndex !== 0}>Tab1 </div>
<div className="tab-2" hidden={tabIndex !== 1}>Tab2</div>
</div>
</div>
);
};
export default InventoryMain;
I was expecting a simple tab and was watching this video.
Simple React Tab video
I'm making a website and for some reason the images are not showing up on the browser. The ALT TEXT is appearing correctly but the images are not. Images have been placed in public/images...
The code is as:
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public\images\untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
try to use forward slash for image path instead of back slash
<section03>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="public/images/untitled.png" alt="an image">
SOME TEXT
</div>
</div>
</div>
</section03>
More examples: >>>
developer.mozilla.org/en-US/docs/Web/HTML/Element/img
w3schools.com/html/html_filepaths.asp
You need to set static folder path first for the express app in order to access static files using ejs or html. Here we will consider public folder as a static folder for our app.
Just copy the below line to the entrypoint of your app & then replace "./public" with your public folder path.
app.use(express.static("./public"));
Complete Example Code
const express = require("express");
const app = express();
app.use(express.static("./public"));
app.get("/", (req,res) => {
return res.send("welcome")
})
/* Start Server */
app.listen(5000, () => {
logger.info(`Success, service running on port 5000.`);
})
Also,
<img src="public\images\untitled.png" alt="an image"> will be replaced with <img src="/images/untitled.png" alt="an image">
I am creating a mobile app with Ionic React. I render multiple IonCards with dynamic data coming from a local JSON file. Actually, I'm mapping through the JSON file. Everything is fine. But it takes a couple of seconds to render all the cards. I want to minimize the loading time. Please help me with how do I optimize the render time and overall performance of the application. The code is below:
//imports...
import data from "../db/data.json";
const Products: React.FC = (filterText) => {
const [searchText, setSearchText] = useState("");
const categories = vocabTopics
//filtering CATEGORIES
.filter((topic) => {return topic.title.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;})
.map((topic) => {
return (
<IonCol size="12" key={topic.id}>
<IonCard mode="md" routerLink={topic.route} className="except-home-screen-card no-margin no-radius-card">
<div className="flex">
<div className="card-img">
<img src={topic.thumbnail}></img>
</div>
<div className="flex-justify-space-b-w">
<div>
<IonCardSubtitle className="except-home-screen-card-subtitle">{topic.subtitle}</IonCardSubtitle>
<IonCardTitle className="except-home-screen-card-title">{topic.title}</IonCardTitle>
</div>
<div>
<IonIcon icon={chevronForwardOutline} className="card-right-icon"/>
</div>
</div>
</div>
</IonCard>
</IonCol>
);
});
return (
<IonPage>
<IonHeader className="ion-no-border">
<IonToolbar className="top-header">
<IonButtons slot="start" className="top-header-icons color-primary">
<IonBackButton defaultHref="home" /></IonButtons>
<div className="top-title-container">
<IonTitle className="ion-text-center v-center">Products</IonTitle>
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="bg-style">
<div className="center padding-y">
<h1 className="lg-text ion-no-margin equal-padding">Products Categories</h>
<p className="ion-text-center ion-no-margin subtitle">70+ CATEGORIES</p>
</div>
<IonGrid className="my-grid ion-no-padding">
<IonSearchbar spellcheck={true} autocorrect="on" className="searchbar" value={searchText} mode="ios" onIonChange={(e) => setSearchText(e.detail.value!)}></IonSearchbar>
<IonRow className="center-padding">
<div className="card-container fluid">
{categories}
</div>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Products;
I suppose 100 Cards are not visible at the same time in a single "view", so the only solution is the "infinite scrolling" and Display/Create them only when them should became visible. (example: https://forum.ionicframework.com/t/infinite-scrolling-of-data-from-the-api/172933)
VS says I have no issues but all my browsers say it is un-defined.. All input is appreciated.
import React from 'react';
import "./Post.css";
import{Avatar} from '#material-ui/core';
function Post({ pofilePic, image, username, timestamp,message}) {
return (
<div className="post">
<div className="post__top">
<Avatar src={profilePic}
className="post__avatar"/>
<div className="post__topInfo">
<h3>{username}</h3>
<p>Timesatmp....</p>
</div>
</div>
```
It’s spelled pofilePic in one place and profilePic in another.
Hi there I want to know why it is throwing a warning on the console
Warning: Unknown prop `iconCLassNameRight` on <div> tag. Remove this prop from the element. For details, see link fb me
in div (created by Paper)
in Paper (created by AppBar)
in AppBar (created by App)
in div (created by App)
in MuiThemeProvider (created by App)
in App
The is the code I am working on it is on meteorjs and material ui
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import AppBar from 'material-ui/AppBar';
import Player from './Player.jsx';
import TeamList from './Team-list.jsx';
import TeamStats from './Team-stats.jsx';
export default class App extends Component {
render(){
return (
<MuiThemeProvider>
<div className="container">
<AppBar
title="Soccer Application" iconCLassNameRight="muidocs-icon-navigation-expand-more" showMenuIconButton={false} />
<div className="row">
<div className="col s12 m7"> <Player /> </div>
<div className="col s12 m5"> <TeamStats /> </div>
<div className="col s12 m5"> <TeamList /> </div>
</div>
</div>
</MuiThemeProvider>
)
}
}
I want to know why this is throwing an error. The line of interest is in the appbar component iconClassNameRight property. Any help would be greatly appreaciated. Thank you.
Props in React are case-sensitive.
Try replacing iconCLassNameRight (uppercase L) to iconClassNameRight (lowercase L)