I have these div cards with some information, and I would like to insert a link inside them, that redirects to another site. It didn't work with <a></a>. can anybody help me?
Thanks!
import React from "react";
function Card(props) {
return (
<div className="card">
<img className="img-logo" src={props.img} alt="image_logo" />
<h3 className="name"> {props.name}</h3>
<p className="paragraph"> {props.description}</p>
<a href={props.link}>Page</a>
</div>
);
}
export default Card;
You can use the <Link> component from react router.
If you are opening the url in new tab, make sure to use noopener and noreferrer so that the browser does not attach the current website's window variable to the newly opened url in the new tab, which can be a security loophole.
import { Link } from 'react-router-dom';
export const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
if (newWindow) newWindow.opener = null;
};
function Card(props) {
return (
<div className="card">
<img className="img-logo" src={props.img} alt="image_logo" />
<h3 className="name"> {props.name}</h3>
<p className="paragraph"> {props.description}</p>
<Link href="#" onClick = {() => openInNewTab(props.link)}>Page</Link>
</div>
);
}
Related
i'm an beginner in react i try to make a website with it
my problem is change a CSS property for a component from another one to open a Nav menu
i make that with querySelector but i don't know if that is the best way to do
here to open the nav menu :
import './Navbar.css'
function Navbar() {
const handOpenMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = 'display: flex'
}
return (
<header className="navbar container">
<a className='logo' href='/#'>pure mix</a>
<i className="fa-solid fa-bars burgerBtn" onClick={handOpenMenu}></i>
</header>
)
}
export default Navbar
and here for close the nav menu :
import "./Navmenu.css";
function Navmenu() {
const handlCloseMenu = () => {
const navMenu = document.querySelector(".navMenu");
navMenu.style.cssText = "display: none";
}
return (
<div className="navMenu">
<a className="navItem" href="/#">
home
</a>
<a className="navItem" href="/#">
about
</a>
<a className="navItem" href="/#">
logo
</a>
<a className="navItem" href="/#">
contact
</a>
<i className="fa-solid fa-xmark close" onClick={handlCloseMenu}></i>
</div>
);
}
export default Navmenu;
Using useState hook for change state in your component
The best solution would be to use the useState hook and pass in Boolean values of true or false. True would render the navbar component while false would not render it. Here is a link that describes how you would implement this in the best way possible(https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/)
I created my own blog with gatsby and contentful using template. And I was tring to change subdirctory of my arcticels. article URLs are working now but links in index page is not working.
import React from 'react'
import { Link } from 'gatsby'
import { GatsbyImage } from 'gatsby-plugin-image'
import Container from './container'
import Tags from './tags'
import * as styles from './article-preview.module.css'
const ArticlePreview = ({ posts }) => {
if (!posts) return null
if (!Array.isArray(posts)) return null
return (
<Container>
<ul className={styles.articleList}>
{posts.map((post) => {
return (
<li key={post.slug}>
<Link to={`/${post.category}/${post.slug}`} className={styles.link}>
<GatsbyImage alt="" image={post.heroImage.gatsbyImageData} />
<h2 className={styles.title}>{post.title}</h2>
</Link>
<div
dangerouslySetInnerHTML={{
__html: post.description.childMarkdownRemark.html,
}}
/>
<div className={styles.meta}>
<small className="meta">{post.publishDate}</small>
<Tags tags={post.tags} />
</div>
</li>
)
})}
</ul>
</Container>
)
}
export default ArticlePreview
I changed to <Link to={/${post.category}/${post.slug}} from <Link to={/${post.slug}}. but somehow links are like http://localhost:8000/undefined/(article-slug). It shold be category name as I set up in Comtentful insted of 'undefined'.
do you have any suggestions?
if I use subdir like /blog/, its working. and Link to={/${post.slug}/${post.slug}} also work.
I have a project in NextJS, where I'm making the NavBar component.
In wide screen it's got the links along the top, and in mobile there's a burger menu which opens a dropdown
Up to this point it all works great, links work.
Then I thought it'd be nice to add an OutsideClickHandler for when it's in mobile mode - i wired in https://www.npmjs.com/package/react-outside-click-handler
but with this addition, the links for my dropdown no longer work - effectively the whole screen (aside from my burger) is being 'listened to' at triggering the OutsideClick.
I'm extremely new to all this. I figure it's because it's just listening to the burger icon. But I have no idea where to start to remedy this, and would super appreciate some input! Half a thought being to apply the OutsideClick handler to the SideMenu component somehow, but I'm puzzled because it's logic otherwise is in NavBar.
Thanks so much.
My apologies I can't link to github as I'm on a branch and my mentor is busy on a tech interview and I don't want to pull request it yet!
NavBar.js - without OutsideClickHandler - links on Side Menu work fine
import { useState } from "react";
import Link from "next/link";
import styles from "../NavBar/NavBar.module.css";
import ButtonBase from "../button/buttonPrimary";
import SideMenu from "../SideMenu/SideMenu";
import MenuItems from "../../../data/MenuItems/MenuItems";
const NavBar = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
const toggleMenu = () => {
if (menuIsOpen === false) {
setMenuIsOpen(true);
} else {
setMenuIsOpen(false);
}
};
return (
<nav className={styles.navBarBox}>
<div className={styles.menuIcon}>
<i className={"fas fa-bars fa-2x"} onClick={toggleMenu}></i>
</div>
<div className={styles.mobileSideMenu}>
{menuIsOpen ? <SideMenu /> : <div></div>}
</div>
<ul className={styles.navMenu}>
{MenuItems.map((item) => (
<li className={styles.navItem} key={item.id}>
<Link href={item.path}>{item.title}</Link>
</li>
))}
</ul>
<Link href="/contact-me">
<a className={styles.contactMeWeb}>
<ButtonBase label="Contact Me" isPrimary={false}></ButtonBase>
</a>
</Link>
<Link href="/contact-me">
<a className={styles.contactMeMobile}>
<i className={"fa-solid fa-message fa-2x"}> </i>
</a>
</Link>
</nav>
);
};
NavBar.js - with OutsideClickHandler - OutsideClickHandler works, but links in side menu only act as an outside click
import { useState } from "react";
import Link from "next/link";
import OutsideClickHandler from "react-outside-click-handler";
import styles from "../NavBar/NavBar.module.css";
import ButtonBase from "../button/buttonPrimary";
import SideMenu from "../SideMenu/SideMenu";
import MenuItems from "../../../data/MenuItems/MenuItems";
const NavBar = () => {
const [menuIsOpen, setMenuIsOpen] = useState(false);
return (
<nav className={styles.navBarBox}>
<OutsideClickHandler
onOutsideClick={() => {
setMenuIsOpen(false);
}}
>
{/* BURGER ICON */}
<a
className={styles.menuIcon}
onClick={() => setMenuIsOpen(!menuIsOpen)}
>
<i className={"fas fa-bars fa-2x"}></i>
</a>
</OutsideClickHandler>
{/* SIDE MENU */}
{menuIsOpen && (
<div className={styles.mobileSideMenu}>
<SideMenu />
</div>
)}
<ul className={styles.navMenu}>
{MenuItems.map((item) => (
<li className={styles.navItem} key={item.id}>
<Link href={item.path}>{item.title}</Link>
</li>
))}
</ul>
<Link href="/contact-me">
<a className={styles.contactMeWeb}>
<ButtonBase label="Contact Me" isPrimary={false}></ButtonBase>
</a>
</Link>
<Link href="/contact-me">
<a className={styles.contactMeMobile}>
<i className="fa-regular fa-envelope fa-2x"></i>
</a>
</Link>
</nav>
);
};
export default NavBar;
SideMenu.js
import MenuItems from "../../../data/MenuItems/MenuItems";
import styles from "../SideMenu/SideMenu.module.css";
const SideMenu = () => {
return (
<div className={styles.mobileMenuBox}>
<ul className={styles.mobileMenu}>
{MenuItems.map((item) => (
<li className={styles.mobileItem} key={item.id}>
<Link href={item.path}><div>{item.title}</div></Link>
</li>
))}
</ul>
</div>
);
};
export default SideMenu;
SOLVED!
I just dragged the:
{menuIsOpen && (
<div className={styles.mobileSideMenu}>
<SideMenu />
</div>
)}
between the
<OutsideClickHandler></OutsideClickHandler>
tags
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;
Recently I made a question about this problem: typeError: Cannot read property 'map' of undefined.
I want to use a component with getStaticProps and put it in my pages/index.js, but I can't with my current code. BUT, if I put this component as a page (pages/component.js) and open like a different page it just work as it should do.
The component Galery.js code:
import styles from '../styles/galery.module.css'
import Image from 'next/image'
import Link from 'next/link'
import photo from '../public/01.png'
export const getStaticProps = async () => {
const res = await fetch('https://my-json-server.typicode.com/Leterinho/PortfolioInteriorDesign/card');
const datas = await res.json();
return {
props: { datas }
}
}
const Galery = ({ datas }) => {
return (
<div className={styles.galeryPage}>
<h1 className={styles.title}>Projetos</h1>
<div className={styles.galery}>
<div className={styles.categoryWrapper}>
<h4 className={styles.subTitle}>Escritório</h4>
<div className={styles.lineWrapper}>
<a className={styles.leftArrow}>❮</a>
<div className={styles.line}>
{datas.map((data) => (
<div className={styles.imageBox}>
<Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
<div className={styles.linkContent}>
<span className={styles.name} key={data.id}>{data.name}</span>
<Link href=""><a className={styles.link}>Veja Mais!</a></Link>
</div>
</div>
))}
</div>
<a className={styles.rightArrow}>❯</a>
</div>
</div>
</div>
</div>
);
}
export default Galery;
API link: https://my-json-server.typicode.com/Leterinho/PortfolioInteriorDesign/card
And this is the structure that I would like to have:
Desirable Structure
And this is the structure that works as a page:
Structure that works
What I should do to work as I planned?
Data fetching methods like getStaticProps can only be used from page components (components inside pages folder). I'd suggest you fetch the data at the page level in index.js, and pass it down to your Galery component.
juliomalves is correct! Thanks.