i tried like ${route} but to be honest i have no idea.
i want to put some helpful links bottom of website and it must show active links name to belong links
import React from 'react'
import './Links.css';
function Links() {
return (
<div>
<div className="links_person">
<div className="links_right_2">
<div className="links_right_cild_2">
<span className="links_span"> You can take look and learn more
about ${route}
</span>
</div>
</div>
</div>
</div>
)
}
export default Links
you can check current route by using useLocation from react-router-dom
something like this
import { useLocation } from 'react-router-dom';
import React from 'react';
import './Links.css';
function Links() {
const location = useLocation();
return (
<div>
<div className="links_person">
<div className="links_right_2">
<div className="links_right_cild_2">
<span className="links_span">
You can take look and learn more about : {location.pathname}
</span>
</div>
</div>
</div>
</div>
);
}
Related
import React from "react";
import "./Header.css";
import "../App.css";
import { GiUbisoftSun } from "react-icons/gi";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
function Header() {
const [header, setHeader] = useState(false);
return (
<div className={header ? "header" : "header active"}>
<div className="headerContainer">
<div className="headerWrapper">
<div className="logo">
<GiUbisoftSun className="logoIcon" />
<span className="logoTitle">SQUARESPACE</span>
</div>
<Router>
<div className="links">
<ul>
<li className="linkProduct">
<Link to="#footer">Product</Link>
</li>
<li className="linkTemplates">
<Link to="/Templates">Templates</Link>
</li>
<li className="linkResources">
<Link to="Resources">Resources</Link>
</li>
</ul>
</div>
<div className="userEntry">
<span className="logIn">LOG IN</span>
<span className="getStarted">GET STARTED</span>
</div>
<Routes>
<Route path="#footer"></Route>
<Route path="/users"></Route>
<Route path="/"></Route>
</Routes>
</Router>
</div>
</div>
</div>
);
}
export default Header;
import React from "react";
import "./footer.css";
function Footer() {
return (
<div className="footer" id="footer">
<div className="footerContainer">
<div className="footerWrapper">
<div className="footerTextIcon">
© 2023 · Made with 💕 by Barbaros Ihtiyar
</div>
</div>
</div>
</div>
);
}
export default Footer;
I tried something like this but without success. I tried to do it by giving an id, but it shows the id in the link, it does not go to the desired place. When my request is pressed, the page scrolls down to where I want it. I also looked at the react-router-dom documentation, but I couldn't find an answer for myself. In the solutions I tried, I could only change the link on the page, when I clicked it, I couldn't take the page to the desired area. I don't know where I went wrong. I would appreciate your help.
you can use the react-scroll-to-element library for this.
For example:- https://codesandbox.io/s/scroll-to-an-element-on-click-in-reactjs-nku0l?from-embed
I Create a component and it doesn't render (react js) < --- completely newbie react js user
first i create well structure of a card in list
meetupitems.js
import { Action } from 'history';
import css from './Meetupitems.module.css';
function Meetupitem(props) {
<li className={css.item}>
<div className={css.image}>
<image src={props.image} alt={props.title} />
</div>
<div className={css.content}>
<h3>{props.title}</h3>
<address>{props.address}</address>
<p>{props.description}</p>
</div>
<div className={css.actions}>
<button></button>
</div>
</li>;
}
export default Meetupitem;
then use map() to create card list from "list of data"
Meetuplist.js
import Meetupitem from "./Meetupitems";
import css from "./Meetuplist.module.css";
function Meetuplist(props) {
return (
<ul className={css.list}>
{props.meetups.map((meetup) => (
<Meetupitem
key={meetup.id}
title={meetup.title}
image={meetup.image}
address={meetup.address}
description={meetup.description}
/>
))}
</ul>
);
}
export default Meetuplist;
and when i'm trying to use it
Allmeetup.js
import Meetupitem from "./Meetupitems";
import css from "./Meetuplist.module.css";
function Meetuplist(props) {
return (
<ul className={css.list}>
{props.meetups.map((meetup) => (
<Meetupitem
key={meetup.id}
title={meetup.title}
image={meetup.image}
address={meetup.address}
description={meetup.description}
/>
))}
</ul>
);
}
export default Meetuplist;
the result I saw was a blank page at the index route(where the list should show)
but others route was fine
I can't figure out what's wrong
I think the issue is nothing is being returned from your Meetupitem component. There is no return statement in it.
I believe if you look in console in chrome dev tools, you will be able to see the error messages for it.
Try changing it to as shown below:
import { Action } from 'history';
import css from './Meetupitems.module.css';
function Meetupitem(props) {
return (
<li className={css.item}>
<div className={css.image}>
<image src={props.image} alt={props.title} />
</div>
<div className={css.content}>
<h3>{props.title}</h3>
<address>{props.address}</address>
<p>{props.description}</p>
</div>
<div className={css.actions}>
<button></button>
</div>
</li>;
)
}
export default Meetupitem;
I have problem
here is my code
import React from 'react';
import NavLink from 'react-router-dom';
import s from './Navbar.module.css';
const Navbar = () => {
return <nav className={s.nav}>
<div className={s.item}>
Profile
</div>
<div className={`${s.item} ${s.active}`}>
Messages
</div>
<div className={s.item}>
News
</div>
<div className={s.item}>
<a>Music</a>
</div>
<div className={s.item}>
<a>Settings</a>
</div>
</nav>
};
export default Navbar;
It works but when I change to NavLink - White screen is coming
Any advice would be greatly appreciated, thanks!
-I am using Auth0 to authentication in react, I was wondering how can I redirect once the user is authenticated to a new component.
-I am not using react-router-dom , Do I need it ?
-This image have the main part, "onClick={()=>loginWithRedirect()" :
There is the "loginWithRedirect()" I use
Here is my code:
import {Fragment} from "react";
import "../css/AppLightMode.css";
import ButtonMode from "./ButtonMode";
//Importamos Auth0
import { useAuth0 } from "#auth0/auth0-react";
import LogoutButton from "./Logout";
import Profile from "./Profile";
import AppPage from "./AppPage.js";
const MainPageLightMode = ()=>{
const {loginWithRedirect, isAuthenticated} = useAuth0();
return (
<Fragment>
<header className="container">
<ButtonMode/>
<div className="header-img row">
<div className="left seven columns image u-max-full-width">
</div>
<div className="right five columns">
<h1>Learn languages with music</h1>
<p>Learn a new language with a video music and the lyrics in your native language and the language you are learning on </p>
<div className="div-btn">
{isAuthenticated ? <>
<Profile/>
<LogoutButton/>
</>
: <a className="btn-neu-for-lm btn-login btn " onClick={()=>loginWithRedirect() }><span> Login</span></a>}
<a className="btn-neu-for-lm btn-instructions btn" href="#" ><span>Instructions</span></a>
</div>
</div>
</div>
</header>
</Fragment>
)
}
export default MainPageLightMode;
When the component loads, I am making an axios call to a Geolocation API. If the user agrees to let the app get their location, it gets their zipcode. I am then trying to append the zipcode to the zipcode input field, but I can't figure out how to do it. This is my landing page.
import React, { useState, useEffect, useRef } from 'react';
import './App.scss';
import axios from 'axios';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faBars } from '#fortawesome/free-solid-svg-icons';
import LandingPage from './components/landingPage';
function App() {
const[zipcode, setZipcode] = useState();
useEffect(() => {
axios({
"method":"GET",
"url":"https://find-any-ip-address-or-domain-location-world-wide.p.rapidapi.com/iplocation",
"headers":{
"content-type":"application/octet-stream",
"x-rapidapi-host":"find-any-ip-address-or-domain-location-world-wide.p.rapidapi.com",
"x-rapidapi-key":x-rapidapi-key,
"useQueryString":true
},
"params":{
"apikey":apikey
}
})
.then((response)=>{
console.log(response.data.zipCode);
setZipcode(response.data.zipCode);
})
.catch((error)=>{
console.log(error)
});
},[]);
return (
<div className="App" path='/'>
<header className='container'>
<div className='row'>
<div className='col-1'>
<button>
<h1><FontAwesomeIcon icon={faBars} /></h1>
</button>
</div>
<div className='col'>
<h1>MDNight</h1>
</div>
</div>
</header>
<LandingPage zipcode={zipcode} setZipcode={setZipcode} />
<footer className='container'>
<h2>Copyright 2020</h2>
</footer>
</div>
);
}
export default App;
And here is the child component.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function LandingPage(props) {
function handleInputChange(e) {
props.setZipcode(e.target.value);
};
return (
<main className='container'>
<div className='row'>
<div className='col'>
<h1>Welcome to <span>MDNight</span>!</h1>
<h2>The website that makes your date night more convenient.</h2>
<p>Let's assume that you and your "Significant Other" would like to go out for a date night, however, you have to continually switch back and forth between websites looking at showtimes and trying to find a place to eat beforehand. Well, that's where <span>MDNight</span> comes in! We take your location, movie you're interested in seeing, , and show you theaters that are showing your movie, and a list of restaurants nearby. Sound Convenient to you? Enter your info below to get started!</p>
</div>
</div>
<div className='row'>
<div className='col'>
<label htmlFor='zipcodeInput'>Please Enter Your zipcode to get started!</label>
</div>
</div>
<div className='row'>
<div className='col'>
<input name='zipcodeInput' type="text" value={props.zipcode} onChange={handleInputChange} />
</div>
</div>
<div className='row'>
<div className='col'>
<button className='btn btn-primary'>Get Started!</button>
</div>
</div>
</main>
);
}
export default LandingPage;
I've only ever used useState and useEffect, so I don't know if one of the other hooks solves this problem, but if someone could show me how that would be amazing.
I found this answer from someone on a React FB group. I added defaultValue={props.zipcode} to the input and it worked perfectly. I did not know about defaultValue until today.
You do not need zipcode as a dependency of the useEffect hook in the App component. I would suggest having an empty array as your dependency array because you want this hook to run on mount only.