Develop Reference

How to use Hyperlink in React Router dom Link [duplicate]

I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL :
http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much
Carditem.js
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' >
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
className='cards__item__img'
alt='Travel '
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}
<i class='fab fa-github' />
</Link>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
Footer.js
import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';
function Footer() {
return (
<div className='footer-container'>
<section class='social-media'>
<div class='social-media-wrap'>
<small class='website-rights'>© 2020</small>
<div class='social-icons'>
<Link
class='social-icon-link github'
to={{ pathname: "https://github.com" }}
target='_blank'
aria-label='Github'
>
<i class='fab fa-github' />
</Link>
<Link
class='social-icon-link codepen'
to={{ pathname: "https://codepen.io" }}
target='_blank'
aria-label='Codepen'
>
<i class='fab fa-codepen' />
</Link>
<Link
class='social-icon-link Linkedin'
to={{ pathname: "https://www.linkedin.com" }}
target='_blank'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
);
}
export default Footer;

react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:
<a
class='social-icon-link github'
href="https://github.com"
target='_blank'
rel="noopener"
aria-label='Github'
>
<i class='fab fa-github' />
</a>
The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/

You cannot call external links with react-router-dom's Link component. Try the following:
Link
You can also open links in a new tab:
Link in new tab

If your URL coming from the API's you can use like that
<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>

Hope you have understood.
The main fact is you need to use tag instead of tag.
Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........
for example, if you write Github it will not work. You have to write Gitbuh

the link element is not closed
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}>
<i class='fab fa-github' />
</Link>

How to set an an active class to a variable - React

My first question on S.O. let's see how it goes.
I'm trying to set the "active class" to a variable in my Home.js, and pass down the value, as a prop to my <Buddy /> component. Once there I will set that to an integer to decide what slide my text carousel goes to. I'll figure out that part (but if you know, spare me the time).
I'm using an npm package react-scroll to scroll to that component once clicked. Then the component is set to "active". I will drop some code.
Nav bar section in the Home.js component..
return (
<div className="navBar">
<div className="navItem">
<Link
activeClass='active'
to="home"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
<h2>Home</h2>
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="mission"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Mission
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="about"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
About
</Link>
</div>
<div className="navBar">
<Link
activeClass='active'
to="contact"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Contact
</Link>
</div>
</div>
My component sitting right beneath.
<Buddy />
Each component on my SPA/Portfolio has an id that the on my nav bar looks to go to.
//Projects.js
const Projects = () => {
return (
<div className="projectsComponent" id="projects">
</div>
)
}
So when it scrolls to the component, it sets that div? or component? to active.
// back in Home.js
<div className="navItem">
<Link
activeClass='active' <-----------
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
I just want to set whatever I need to, into a variable in Home.js to pass down as a prop to <Buddy />. Thanks, guys! Remember it's my first question ever! Be nice!
** If you have a better idea, like when the scroll reaches that component, set the index of my carousel to 1,2,3.. let me know too. Thanks
*** I will also include my <SpeechCarousel /> component here. It lives in my <Buddy /> component and ill pass another prop to it. Thanks again.
import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"
const SpeechCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<div id="carousel2">
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
</Carousel>
</div>
)
}
export default SpeechCarousel;

NextJs Tooltip with #tippyjs/react

<Link href="/company/add" >
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>
A typical Nextjs Link about works while and adding Tippy Component looks as simple as show below but this dosent work.
<Tippy content="My Tooltip">
<Link href="/company/add" >
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Link>
</Tippy>
If anyone has done this successfully I will appreciate your help. I don't if there is about other tooltip that works easily with NextJs

This works:
<Tippy content="hi">
<div>
<Link href="/">
<a>
Home Page
</a>
</Link>
</div>
</Tippy>
Even MaterialUIs Tooltip works the same way.

Try this it's working for me.
<Link href="/company/add" >
<Tippy content="My Tooltip">
<a title="My New Title" data-toggle='tooltip' className="btn btn-primary">My Link</a>
</Tippy>
</Link>

External Link with React

I'm totally new with React and I'm facing off a problem with an external Link. I would like to use it for a redirection to GitHub every time I click on the icon but actually the new window is not showing up instead I have this URL :
http://localhost:3000/https://github.com. I don't why it is not working because with my footer i have almost the same code and it is working well. If you have solutions for that it will be much appreciated ! Thank you very much
Carditem.js
import React from 'react';
import { Link } from 'react-router-dom';
function CardItem(props) {
return (
<>
<li className='cards__item'>
<Link className='cards__item__link' >
<figure className='cards__item__pic-wrap' data-category={props.label}>
<img
className='cards__item__img'
alt='Travel '
src={props.src}
/>
</figure>
<div className='cards__item__info'>
<h5 className='cards__item__text'>{props.text}</h5>
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}
<i class='fab fa-github' />
</Link>
</div>
</Link>
</li>
</>
);
}
export default CardItem;
Footer.js
import React from 'react';
import './Footer.css';
import { Link } from 'react-router-dom';
function Footer() {
return (
<div className='footer-container'>
<section class='social-media'>
<div class='social-media-wrap'>
<small class='website-rights'>© 2020</small>
<div class='social-icons'>
<Link
class='social-icon-link github'
to={{ pathname: "https://github.com" }}
target='_blank'
aria-label='Github'
>
<i class='fab fa-github' />
</Link>
<Link
class='social-icon-link codepen'
to={{ pathname: "https://codepen.io" }}
target='_blank'
aria-label='Codepen'
>
<i class='fab fa-codepen' />
</Link>
<Link
class='social-icon-link Linkedin'
to={{ pathname: "https://www.linkedin.com" }}
target='_blank'
aria-label='LinkedIn'
>
<i class='fab fa-linkedin' />
</Link>
</div>
</div>
</section>
</div>
);
}
export default Footer;

react-router is used for internal navigation, if you want to navigate outside of your website you should use an a element:
<a
class='social-icon-link github'
href="https://github.com"
target='_blank'
rel="noopener"
aria-label='Github'
>
<i class='fab fa-github' />
</a>
The rel="noopener" is a good security practice: https://mathiasbynens.github.io/rel-noopener/

You cannot call external links with react-router-dom's Link component. Try the following:
Link
You can also open links in a new tab:
Link in new tab

If your URL coming from the API's you can use like that
<Link to={{ pathname:`https://${strFacebook}`}} target="_blank"> Facebook </Link>

Hope you have understood.
The main fact is you need to use tag instead of tag.
Side by side you have to endure that the url must start with "https:" else it will always redirect to localhost:........
for example, if you write Github it will not work. You have to write Gitbuh

the link element is not closed
<Link
class='social-icon-card-github'
to={{ pathname: "https://github.com" }}>
<i class='fab fa-github' />
</Link>

How to give space between the react-bootstrap accordions when dynamic data is given to it?

i have used a react-bootstrap accordion. I have done an api call to populate dynamic data within the accordion by mapping the data.Its background color is white and if i use a break tag to break between the accordions everything becomes white.you can't figure they are different accordions.
i want to modify the accordion properties using css.My two main concern here are
1) to give space between accordions.
2) when i click on one accordion header all the accordions opens.
Following is my piece of code for accordion:
<Accordion className="accordion-length" >
stateCategory.categories !== undefined ?(
stateCategory.categories.map((cat)=>{
return (
<Card className="card-style">
<Accordion.Toggle id="Accordion" as={Card.Header} className=" back card-style " style={{top: "5px"}}>
{cat.name}
<Link onClick={()=>{handleBlock(cat)}}>
<img
alt="block"
src={require("../../assets/block.svg")}
className="images" />
</Link>
<Link onClick={()=>{handleDelete(cat)}} >
<img
alt="delete"
src={require("../../assets/delete.svg")}
className="images" /></Link>
<Link onClick={()=>{handleSubCategoryCreate(cat)}}>
<img
alt="add "
src={require("../../assets/add.svg")}
className="images" /></Link>
<Link onClick={()=>{handleEdit(cat)}}>
<img
alt="edit "
src={require("../../assets/edit.svg")}
className="images" /></Link>
</Accordion.Toggle>
<Accordion.Collapse style={{whiteSpace : "pre"}}>
<Card.Body>
<ul>
{(cat.jobSubCategories) &&
cat.jobSubCategories.map((subCat)=>{
return <li key={subCat.id}>{subCat.name}
<Link onClick={()=>{handleSubBlock(subCat)}}>
<img
alt="block"
src={require("../../assets/block.svg")}
className="images" />
</Link>
<Link onClick={()=>{handleSubCategoryDelete(subCat)}}>
<img
alt="delete"
src={require("../../assets/delete.svg")}
className="images" />
</Link>
<Link onClick={()=>{handleSubEdit(subCat)}}>
<img
alt="edit "
src={require("../../assets/edit.svg")}
className="images" />
</Link>
</li>
})
}
</ul>
</Card.Body>
</Accordion.Collapse>
</Card>
)
})
):<></>
}
</Accordion>