React components doesn't display content - javascript

I am creating a web application using Laravel and React JS. I have written multiple JSX components to load the page. All the components are mounting properly without any errors, but here the problem is Some heading tags and some form content are not displaying on the page and also most of the text and other content missing from the page. Even those are rendering on component and I can inspect those using browser console and react dev tools. But it is not displaying on the page. I tried so many ways to fix this problem, but finally, I ended up with failure. Any help regarding fix this issue would be appreciable.
Here's my code:
HomeBanner.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class HomeBanner extends Component {
render() {
return (
<div className="banner layer" id="home">
<div className="container">
<div className="row banner-text">
<div className="col-lg-12 col-md-12 mt-lg-0 mt-5 banner-form" data-aos="fade-left">
<h5>Exclusively We are Expert in Medical Professional</h5>
<form action="#" className="mt-4 banner-form-input">
<p>What are you Looking?
<label className="container-radio first-radio">Consultant
<input type="radio" name="radio" />
<span className="checkmark"></span>
</label>
<label className="container-radio">Diagonastic Center
<input type="radio" name="radio" />
<span className="checkmark"></span>
</label>
</p>
<div className="row">
<div className="col-lg-4">
<div className="location-wrapper">
<div className="demo">
<input type="text" className="location-input" placeholder="Location" /><input type="submit" value="" className="sub-loc" /><i className="fa fa-crosshairs"></i>
</div>
</div>
</div>
<div className="col-lg-8">
<div className="search-wrapper">
<div className="demo1">
<input type="text" className="location-input" placeholder="Search by specialist / Name / Clinic" /><input type="submit" value="" className="sub-ser" /><i className="fa fa-search"></i>
</div>
</div>
</div>
</div>
</form>
<div className=" py-md-3 circle-icons">
<div className="row">
<div className="col-lg-4 col-md-6">
<img src="./public/images/home-1.png" />
<span>Schedule A <br /> Medical Checkup</span>
</div>
<div className="col-lg-4 col-md-6">
<img src="./public/images/home-2.png" />
<span>Appointment with <br /> Best Doctor Near You</span>
</div>
<div className="col-lg-4 col-md-6">
<img src="./public/images/home-3.png" />
<span>Get Your Reports <br /> Over Email</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default HomeBanner;
App.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HomeBanner from '../elements/HomeBanner';
import Analytics from '../elements/Analytics';
import FeedbackHome from '../elements/FeedbackHome';
class App extends Component {
render() {
return (
<div className = 'index-page'>
<HomeBanner />
</div>
);
}
}
export default App;
Router.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, NavLink, Link, BrowserRouter as Router, Switch } from 'react-router-dom';
import NavBar from './components/NavBar';
import Footbar from './components/Footbar';
import App from './containers/App';
const routing = (
<Router>
<div>
<NavBar />
<Switch>
<Route exact path="/" component={App} />
</Switch>
<Footbar />
</div>
</Router>
)
export default routing;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import routing from './router.js'
ReactDOM.render(routing, document.getElementById('root'));
For referrence I am attaching the normal html template and react template, so that it will help you to understand what things were missed.
Html:
enter image description here
React:
enter image description here
HTML:
enter image description here
React:
enter image description here
If you see above pictures, you will find the missing things on react template. Even I wrote same code for two templates and now also I can inspect that missing elements from my dev tools but its not displaying in the browser.


Remove exact from your Route. Exact will only match the / route with nothing after it, and you're testing on the /right route, which does not match.
<Route path="/" component={App} />

Related

React won't load local images using props

Card.js
import React from "react"
import '../index.css';
import Star from "../image/Star 1.png";
export default function Card(props) {
return (
<div className="card">
<img src={`../image/${props.img}`} className="card--image" alt="swimer" />
<div className="card--stats">
<img src={require(`../image/Star 1.png`)} className="card--star" alt="star" />
<span>{props.rating}</span>
<span className="gray">(6) • </span>
<span className="gray">USA</span>
</div>
<p>Life Lessons with Katie Zaferes</p>
<p><span className="bold">From $136</span> / person</p>
</div>
)
}
App.js
import React from "react"
import Navbar from "./Airbnb/Navbar"
import Hero from "./Airbnb/Hero"
import Card from "./Airbnb/Card"
export default function App() {
return (
<div>
<Navbar />
<Hero/>
<Card
img="swimer.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
</div>
)
}
the image was not showing to begin so i used props it worked for me but then it come to
<img src={../image/${props.img}} className="card--image" alt="swimer" />
I tried "requires" I tried "default" but it's not working. what should i do display the image.

you can do this
import imageAddress from '../image/swimer.png';
<Card
img={imageAddress}
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
it should work

Semantic UI desplay component behind another component

The following code is written using the semantic UI class to display the header component.
This is the Header.js file.
import React from "react";
const Header = () => {
return (
<div className="ui fixed menu">
<div className="ui container center">
<h2>Contact Manager</h2>
</div>
</div>
);
};
export default Header;
This is the AddContact.js file
import React from "react";
class AddContact extends React.Component{
render(){
return(
<div className="ui main">
<h2>Add Contact</h2>
<form className="ui form">
<div className="field">
<label>Name :</label>
<input type="text" name="name" placeholder="name" />
</div>
<div className="field">
<label>Contact Number :</label>
<input type="text" name="contactnumber" placeholder="Contact Number" />
</div>
</form>
</div>
);
}
}
export default AddContact;
This is the App.js file.
import React from 'react';
import './App.css';
import Header from './Header';
import AddContact from './AddContact';
function App() {
return (
<div>
<Header />
<AddContact />
</div>
);
}
export default App;
This is the index.js file.
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
When I run the project, the form component from the AddContact.js is displayed behind the Header component from the Header.js file. How can I solve this problem?

On click on a <link> routing not working but on reloading URL it works

Need help!
In my application, I've created a "Link" for navigating from the current page to another page and for that I've used routes and it is kind of working as on the click on the link URL changes but the page is not navigated to the URL specified on the URL bar which is directly accessible when you reload the URL after click.
I'm new to this technology, please let me know if I've gone wrong somewhere.
App.js
import React from 'react';
import InstaGallery from './components/instaGallery.js';
import Home from './components/home'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
function App() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/instagallery' component={ InstaGallery } />
</Switch>
</Router>
);
}
export default App;
Link.js
<Link to={'/instaGallery'} replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
{/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
HOME</span></Link>
instaGallery.js
//Page to be navigated on click of link
import React from "react";
import $ from "jquery";
class InstaGallery extends React.Component {
// another function starts
render() {
return (
<div className="container-fluid no-padd">
<div className="gallery-wraper">
<div className="main-grid">
<p className="p-subtext">Tag us to be featured</p>
<p className="p">#yallaparty</p>
<div className="item item1 open" />
<div className="item item2" />
<div className="item item3" />
<div className="item item4" />
<div className="item item5" />
</div>
<div className="description-wraper">
<div className="pen-description">
<div className="date">06/03</div>
<div className="star-ratings-review">
<div className="star-ratings-gallery"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p className="review-text">
Thank you so much! You did an amazing job on
such short notice. Yalla Party was a major help
and I’ll definitely refer you. Good luck for the
future!
</p>
<p className="text-person">JUMA AL MAJID</p>
</div>
</div>
<div className="gallery-btn"><span>
<button className="gallery-prev-btn">
<img src="https://i.ibb.co/hDfxkr6/Group-629.png" alt="" className="gallery-btn-arrow" />
</button></span><span><button className="gallery-nxt-btn">
<img src="https://i.ibb.co/3hpG9rc/Group-628.png" alt="" className="gallery-btn-arrow" />
</button></span></div>
</div>
</div>
</div>
);
}
}

Try removing exact on with path="/".
Add render method and return something in InstaGallery component.
Question: Why are you importing jQuery in InstaGallery component?

You have to remove {} from Link tag like
<Link to='/instaGallery' replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
{/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
HOME</span></Link>

Building a small site in React with one module VS in Html/css/js

I'm new to React.. If I load all my content like so in App.js in the React framework (all as one component). I'm guessing I'm not really using React in the proper way. But does this one component for a whole website approach have any advantage/disadvantage over building it in the normal HTML/CSS/JS format? Would this actually be slower as a site ?
import React, { Component } from 'react';
import WebFont from 'webfontloader';
import urban_tribal_stfregular from './fonts/urban_tribal_stfregular.ttf';
import urban_brush_zoneregular from './fonts/urban_brush_zoneregular.ttf';
import urbanpaintsregular from './fonts/urbanpaintsregular.ttf';
import urbantrailsregular from './fonts/urbantrailsregular.ttf';
import urbanposterregular from './fonts/urbanposterregular.ttf';
import urban_rubberregular from './fonts/urban_rubberregular.ttf';
import logo from './img/logo.png';
import leaf from './img/leaf.png';
import hq from './img/hq.png';
import eyeSprinkle from './img/eye-sprinkle.png';
import docturDotHead from './img/doctur-dot-head.png';
import johnnyVenus from './img/johnny-venus.png';
import pyramid from './img/pyramid.png';
import goldElevator from './img/gold-elevator.png';
import demon from './img/demon.png';
import sword from './img/sword.png';
import stage1 from './img/stage-1.png';
import stage1Fire1 from './img/stage-1-fire-1.png';
import stage1Fire2 from './img/stage-1-fire-2.png';
import stage2Fire1 from './img/stage-2-fire-1.png';
import cloud1 from './img/cloud-1.png';
import cloud2 from './img/cloud-2.png';
import stage2 from './img/stage-2.png';
import footerShim from './img/840.png';
import footer from './img/footer.png';
import './App.css';
const styles = {
urban_tribal_stfregular: {
fontFamily: 'urban_tribal_stfregular'
},
urban_brush_zoneregular: {
fontFamily: 'urban_brush_zoneregular'
},
urbanpaintsregular: {
fontFamily: 'urbanpaintsregular'
},
urbantrailsregular: {
fontFamily: 'urbantrailsregular'
},
urbanposterregular: {
fontFamily: 'urbanposterregular'
}
};
// CONFIG OBJECT TO PASS TO HOC
class App extends Component {
render() {
let projectTitle = 'Earthgang'
return (
<div className="App">
<div className="background-enhance">
<header className="App-header">
<div style={{flexDirection:"row"}}>
{/* new wrap for dat perspective ting */}
<div className="wrap">
<div className="bg">
{/* perspective level 1 (back)*/}
<div style={{ position: "absolute", width: "100%" }}>
<div className="plate">
<br />
</div>
<img src={hq} className="hq" alt="HQ" />
<div id="imageEye" className="spriteEye"></div>
<img src={leaf} className="leaf" alt="weed" />
<img src={leaf} className="leaf leaf_right" alt="grass" />
</div>
<div className="bg">
{/* perspective level 2*/}
<div id="imageHeadJohny" className="spriteHeadJohny"></div>
<div id="imageHeadDot" className="spriteHeadDot"></div>
<div className="bg">
{/* perspective level 3*/}
<img alt="" id="myButtn" className="logoTop" src={logo} />
<div className="pyramid-box">
<img src={pyramid} className="pyramid" alt="pyramid" />
<img src={goldElevator} className="gold-elevator" alt="pain profit" />
<img src={eyeSprinkle} className="eye-sprinkle" alt="eye" />
<img src={demon} className="demon" alt="demon" />
<div className="stages stage-1-box">
<img src={stage1}className="stage-1" alt="Stage 1" />
<img src={stage1Fire1} className="stage-1-fire-1" alt="Stage 1 Fire 1" />
<img src={stage1Fire2} className="stage-1-fire-2" alt="Stage 1 Fire 2" />
</div>
<div className="stages stage-2-box">
<img src={stage2} className="stage-2" alt="Stage 2" />
<img src={stage2Fire1} className="stage-2-fire-1" alt="Stage 2 Fire 1" />
</div>
</div>
<div id="imageApe" className="spriteApe"></div>
<div id="imageHyena" className="spriteHyena"></div>
</div>
</div>
</div>
</div>
{/* End of new wrap for dat perspective ting */}
</div>
</header>
<div id="footer1">
</div>
<div id="footer2">
<p>Footer (or other) content here</p>
</div>
<div style={{flexDirection:"row"}}>
<div>
</div>
</div>
</div>
</div>
);
}
}
export default App;

Well , this is entirely just my own opinion which may be wrong .
If you are building with this single component website approach , then there is no need to use react really . You are just loading extra 57 kb or something according to this link React file size since you are not loading extra libraries.
But obviously maintaining this would not be an easy job and you are better off using react features to make you life easier and make the app scalable

Components not re-rendering on route change - React HashRouter

I've got a problem with react and react-router.
When I click on a link (in my example contact in Footer.js), the url changes, but the desired component Location is not shown. When I refresh the site then, the correct component is displayed.
App.js:
import React, { Component } from 'react';
import { BrowserRouter as Router, HashRouter, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import Footer from './Footer.js';
import Navigation from './Navigation.js';
import Background from './Background.js';
import Home from './Home.js';
import Products from './Products.js';
import Industries from './Industries.js';
import Partner from './Partner.js';
import Location from './Location.js';
import MeetUs from './MeetUs.js';
import ScrollUp from './ScrollUp.js';
import Divider from './Divider.js';
import Country from './Country.js';
import Language from './Language.js';
import Waypoint from 'react-waypoint';
import $ from "jquery";
class App extends Component {
constructor(props) {
super(props);
this.state = {
currentLanguage: 'en',
currentBU: '',
currentIndustry: '',
showMainProductGroups: false,
currentCountry: 'group',
countryObject: Country['group'],
contacts: [],
mainProductGroups: [],
};
}
handleCountryChange() {
//...
}
handleLanguageChange() {
//...
}
handleBUChange() {
//...
}
render() {
const routes = [
{
path: '/',
exact: true,
components: () =>
<div>
<Home key="home" currentLanguage={this.state.currentLanguage} />
</div>,
},
{
path: '/contact',
exact: true,
components: () => <Location key="locations" currentLanguage={this.state.currentLanguage} country={this.state.countryObject} contacts= {this.state.contacts} onCountryChange={this.handleCountryChange.bind(this)} />
},
]
return (
<HashRouter>
<div>
<Background />
<div id="wrap">
<div id="main" className="container clear-top marginBottom50px">
<div id="content">
<Navigation key="navBar" currentLanguage={this.state.currentLanguage} onLanguageChange={this.handleLanguageChange.bind(this)} onBUChange={this.handleBUChange.bind(this)} onCountryChange={this.handleCountryChange.bind(this)} />
{
routes.map((route, index) => (
<Route key={index} path={route.path} exact={route.exact} component={route.components} />
))
}
</div>
</div>
</div>
<Footer key="footer" currentLanguage={this.state.currentLanguage} />
<ScrollUp key="scrollUp" />
</div>
</HashRouter>
);
}
}
export default App;
Home.js:
import React, { Component } from 'react';
import $ from "jquery";
import { Link } from 'react-router-dom';
import {withRouter} from 'react-router';
import Language from './Language.js';
import locations from './locations.jpg';
import locationLegend from './locationLegend.jpg';
require('bootstrap')
class Home extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<div className="container marginTop50px marginBottom50px area">
<div className="row">
<div className="col-12 text-center animDelay2 fadeInDown animated">
<h1>International Distribution of Specialty Chemicals</h1>
</div>
</div>
<div className="row marginTop25px">
<div className="col-12 text-center animDelay2 fadeInUp animated">
{Language[this.props.currentLanguage].homeStartText}
</div>
</div>
<div className="row marginTop25px">
<div className="col-12 text-center">
<img src={locations} className="img-fluid" alt="Locations" />
</div>
</div>
<div className="row marginTop25px">
<div className="col-12 text-center">
<img src={locationLegend} className="img-fluid" alt="Locations" />
</div>
</div>
</div>
);
}
}
export default withRouter(Home);
Location.js:
import React, { Component } from 'react';
import $ from "jquery";
import { Link } from 'react-router-dom';
import Language from './Language.js';
import Country from './Country.js';
import ContactPerson from './ContactPerson.js';
import locations from './locations.png';
import phone from './phoneBlack.svg';
import fax from './faxBlack.svg';
import email from './emailBlack.svg';
import {withRouter} from 'react-router';
require('bootstrap');
class Location extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('Country change:' + this.props.country.key);
$('#selectCountry').val(this.props.country.key); //name['en']
}
onCountryChange() {
let countryName = this.refs.country.value;
this.props.onCountryChange(countryName);
}
render() {
return (
<div className="container marginTop50px marginBottom50px area" id="locations">
<div className="row">
<div className="col-12 text-center">
<h2>{Language[this.props.currentLanguage].locations}</h2>
</div>
</div>
<div className="row marginTop25px">
<div className="col-12 text-center">
<div className="form-group">
<select id="selectCountry" className="form-control" ref="country" onChange={this.onCountryChange.bind(this)}>
<option defaultValue>{Language[this.props.currentLanguage].selectLocation.toUpperCase()}</option>
{
Object.keys(Country).map((countryKey) => {
const country = Country[countryKey];
return (
<option value={countryKey} key={"loc" + countryKey}>{country.name[this.props.currentLanguage].toUpperCase()}</option>
);
})
}
</select>
</div>
</div>
</div>
<div className="row marginTop25px">
<div className="col-12 text-center">
{this.props.country.name[this.props.currentLanguage].toUpperCase()}
<br />
<address>
<span dangerouslySetInnerHTML={{__html: this.props.country.address}}></span>
<br />
<br />
<img src={phone} alt="Anrufen" className="phoneMain"></img><span> </span>
<a href={this.props.country.phoneHTML}>{this.props.country.phone}</a>
<br />
<img src={fax} alt="Fax" className="phoneMain"></img><span> </span>
<a href={this.props.country.faxHTML}>{this.props.country.fax}</a>
<br />
<img src={email} alt="Email" className="emailMain"></img><span> </span>
<a href={"mailto://" + this.props.country.email}>{this.props.country.email}</a>
</address>
</div>
</div>
<div className="row marginTop25px">
<div className="col-12 text-center">
{Language[this.props.currentLanguage].vatRegistrationNumber + ": " + this.props.country.vatNo}
<br />
{Language[this.props.currentLanguage].registrationOffice + ": "}
<span dangerouslySetInnerHTML={{__html: this.props.country.registrationOffice}}></span>
</div>
</div>
<div className="row marginTop50px">
<div className="col-12 text-center">
<h3>{Language[this.props.currentLanguage].contact}</h3>
</div>
</div>
<div className="row">
{
this.props.contacts.map((contact) => {
return (
<div className="col-12 col-sm-12 col-md-12 col-lg-6 text-center">
<ContactPerson contact={contact} key={"contact" + contact.id} />
</div>
);
})
}
</div>
</div>
);
}
}
export default withRouter(Location);
Footer.js:
import React, { Component } from 'react';
import $ from "jquery";
import { Link } from 'react-router-dom';
import {withRouter} from 'react-router';
import Language from './Language.js';
import phone from './phoneWhite.svg';
import fax from './faxWhite.svg';
require('bootstrap');
class Footer extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<footer className="footer">
<div className="container-fluid borderTop1px footerLayout">
<div className="row">
<div className="col-3">
<address>
<small>
Some text
</small>
</address>
</div>
<div className="col-6 text-center">
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center">
<small>{Language[this.props.currentLanguage].download}</small>
</div>
<div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center">
<Link to="/imprint" className="nav-link footerLink"><small>{Language[this.props.currentLanguage].imprint}</small></Link>
</div>
<div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center">
<Link to="/contact" className="nav-link footerLink"><small>{Language[this.props.currentLanguage].contact}</small></Link>
</div>
<div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center">
<Link to="/termsAndConditions" className="nav-link footerLink"><small>{Language[this.props.currentLanguage].termsAndConditions}</small></Link>
</div>
</div>
</div>
<div className="col-3">
<ul className="list-inline">
<li>
<img src={phone} alt="Anrufen" className="phone"></img> <small><a className="footerLink" href="tel:+49">+49</a></small>
</li>
<li>
<img src={fax} alt="Fax" className="phone"></img> <small><a className="footerLink" href="tel:+49">+49</a></small>
</li>
</ul>
</div>
</div>
</div>
</footer>
);
}
}
export default withRouter(Footer);
What I'm doing wrong? Why it is not working, when I click on a link?

Got it working now.
I needed to change <HashRouter> to <Router>. Then it works fine.
UPDATE:
This solution solves the problem, but then there is a different problem: When I have navigated and refresh the page, then an error (404) is thrown, because there is of course no such a page on the server.
I need to get the HashRouter work.

When you declare your routes in App.js, you should pass the props to the component:
components: props => <Location {...props} <insert other props> />
You should stick to the <Router> solution as having unnecessary hash in the url is ugly.
When I have navigated and refresh the page, then an error (404) is thrown, because there is of course no such a page on the server.
To resolve this, you need to set up a redirect to redirect all requests to the base url for the React app to handle (the url displayed will be preserved).
On Netlify, you can create a _redirects file in your public folder with the content:
/* /index.html 200
On AWS S3, the redirect rules can be set in S3 or CloudFront, see the answers here.
For Google Cloud bucket, see this.
For Github pages, see this.

In your Route component you use component prop to pass the Location component (instead of render or children props available on Route) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop.However in your case it seems you are using it for no reason so you should just pass the component and not an inline function that returns it like so :
const routes = [
{
path: '/',
exact: true,
components: <Home key="home" currentLanguage={this.state.currentLanguage}/>
},
{
path: '/contact',
exact: true,
components: <Location key="locations" currentLanguage={this.state.currentLanguage} country={this.state.countryObject} contacts= {this.state.contacts} onCountryChange={this.handleCountryChange.bind(this)} />
},
]

Make your routes use Component as below
import {IndexRoute, Route} from 'react-router';
<Route component={App}>
<Route path='/locations' component={LocationComponent}/>
</Route>
This is what I am doing in my current project without using HashRouter.
Currently, When you do
<Route key={index} path={route.path} exact={route.exact} component={route.components} />
I don't think {route.components} treats it as a component.

Could be a problem with withRouter().
Have you seen this?
https://github.com/ReactTraining/react-router/issues/5037

Categories