Develop Reference

Link from 'react-router-dom' does not work inside <div>

Please do not mark duplicate. I read through many answers but none of them solved the problem!
When I wrap my component with <Link></Link> everything works fine. But when I wrap the component with a <div></div> and take the <Link> into the component <Link> stops working.
<Link> Works:
//here <Link to='candidate-info' className={styles["candidate-info"]}>
<div className={`${styles["container"]} ${i === 1 ? styles["selected"] : ''}`}>
<div className="card" style={{ width: '18rem', minHeight: '21.875rem' }}>
<div className={styles["image-container"]}>
<img src="/uploads/profile.jpeg" className="card-img-top fluid" alt="..." />
</div>
<div className="card-body">
<h5 className="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
<p className="card-text">{candidate.motto}</p>
</div>
<div className={`card-body ${styles["button-container"]}`}>
<button className="btn btn-sm btn-primary">Vote</button>
<button className="btn btn-sm btn-info">More info</button>
</div>
</div>
<div className={styles["overlay"]}>
<div className={styles["icon"]} title="User Profile">
<i className="fa fa-check"></i>
</div>
</div>
</div>
</Link>
<Link> Doesn't work:
<div to='candidate-info' className={styles["candidate-info"]}>
<div className={`${styles["container"]} ${i === 1 ? styles["selected"] : ''}`}>
<div className="card" style={{ width: '18rem', minHeight: '21.875rem' }}>
//here <Link className={styles["image-container"]}>
<img src="/uploads/profile.jpeg" className="card-img-top fluid" alt="..." />
</Link>
<div className="card-body">
<h5 className="card-title">{`${candidate.name} ${candidate.surname}`}</h5>
<p className="card-text">{candidate.motto}</p>
</div>
<div className={`card-body ${styles["button-container"]}`}>
<button className="btn btn-sm btn-primary">Vote</button>
//here <Link to='candidate-info'>
<button className="btn btn-sm btn-info">More info</button>
</Link>
</div>
</div>
<div className={styles["overlay"]}>
<div className={styles["icon"]} title="User Profile">
<i className="fa fa-check"></i>
</div>
</div>
</div>
</div>
App.js (just in case)
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Container } from 'react-bootstrap'
function App() {
return (
<Router>
<main className='py-3'>
<Container>
<Route path='/login' component={LoginPage} />
<Route path='/voting-summary' component={VotingSummary} />
<Route path='/candidate-info' component={CandidateInfoPage} exact />
<Route path='/register-candidate' component={registerCandidates} />
<Route path='/register-voter' component={registerVoter} />
<Route path='/' component={MainPage} exact />
</Container>
</main>
</Router>
);
}
Browser inspect shows <a> tags.
<div class="style_candidate-info__gbgqb">
<div class="style_container__29PKk ">
<div class="card" style="width: 18rem; min-height: 21.875rem;">
<a href="/candidate-info">
<img src="/uploads/profile.jpeg" class="card-img-top fluid" alt="...">
</a>
<div class="card-body">
<h5 class="card-title">As professional Bile</h5>
<p class="card-text">To make brightest future for our country</p>
</div>
<div class="card-body style_button-container__2mqXL">
<button class="btn btn-sm btn-primary">Vote</button>
<a href="/candidate-info">
<button class="btn btn-sm btn-info">More info</button>
</a>
</div>
</div>
<div class="style_overlay__12tWI">
<div class="style_icon__peFOR" title="User Profile">
<i class="fa fa-check"></i>
</div>
</div>
</div>
</div>

Solved!
It was a css styling issue. I had a css that uses position: absolute;:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: rgb(115, 255, 0);
}
For some reason it was causing the issue. Then I changed it to position: static; and now it works.

Uncaught TypeError: Cannot read property 'renderRows' of undefined

I am in the process of switching a component class to a function in my website so I can use hooks to interact with my backend, but after switching to the arrow function i am now getting the error above. What exactly changed to cause this error, I know i had to delete the render{} but is that what is causing it? Here is my current code where the error is located.
import React, { Component, useEffect, useState } from "react";
import ReactDOM from 'react-dom';
import { Link } from "react-router-dom";
import "./HomePageBody.scss";
import products from "../../../../back-end/products";
const HomePageBody = () => {
const getProducts = async() => {
try {
const response = await fetch("http://localhost:5000/carts");
const jsonData = await response.json();
console.log(jsonData);
} catch (err) {
console.error(err.message);
}
}
useEffect(() => {
getProducts();
});
let renderRows = () => {
let finalArr = [];
products.forEach((product) => {
finalArr.push(
<div className="col-md-6 col-lg-4 mt-4 colCard w-75">
<Link
to={{
pathname: "/ProductPage/" + product.name,
state: { sentproduct: product },
}}
>
<div className="card w-100 h-100">
<div className="card-img-wrap w-100 h-100">
<img
className=" card-img-top"
src={product.img}
alt="Card image cap"
/>
</div>
<div className="card-body">
<h6 className="card-title text-center">{product.name}</h6>
<p className="card-text text-center">
<small className="text-muted red">${product.price}</small>
</p>
</div>
</div>
</Link>
</div>
);
});
return finalArr;
}
return (
<div className="largebody ">
<div
id="carouselAd"
className="carousel slide carousel-custom"
data-ride="carousel"
>
<div className="carousel-inner">
<div className="carousel-item active">
<a href="#">
<img
className=""
src="https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg"
alt="First slide"
/>
</a>
</div>
<div className="carousel-item">
<a href="#">
<img
className=""
src="https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg"
alt="Second slide"
/>
</a>
</div>
<div className="carousel-item">
<a href="#">
<img
className=""
src="https://res.cloudinary.com/ndc-images/image/upload/f_auto,fl_force_strip.preserve_transparency.progressive.sanitize,q_auto:best/media//blog/buy-affordable-high-quality-clothes-that-last-from-sustainable-brands.jpg"
alt="Third slide"
/>
</a>
</div>
<div className="carsouselControls">
<a
className="carousel-control-prev"
href="#carouselAd"
role="button"
data-slide="prev"
>
<span
className="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next"
href="#carouselAd"
role="button"
data-slide="next"
>
<span
className="carousel-control-next-icon color.red"
aria-hidden="true"
></span>
<span className="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div className="col-lg-9 col-sm-12 m-auto">
<h1 className="text-center mt-5 mb-3 ml-auto mr-auto headerFont">
"Equality is the soul of liberty; there is, in fact, no liberty
without it." - Frances Wright
</h1>
<p className="paragraphFont">
We at EqualityFits believe that all people should be treated equaly
and fairly regarldess of race, religion, and sexuality. We support
groups such as Black Lives Matter and LBGTQ. Every one of our
products donates to an underlying organization that has to do with
that specific product. We believe that helping theses organizations
is a first step in total equality throughout society.
</p>
</div>
<div className="container cardbuttons text-center mb-5 mt-5">
<div className="row mt-5 inline-block">
<div className="col-lg-4 ml-auto">
<Link
to={{
pathname: "/Collections/" + "LGBT",
key: Math.random,
state: { sentinfo: "LGBT" },
}}
>
<div className="card">
<div className="card-img-wrap">
<img
className="card-img-top ml-auto mt-2 img"
src="http://equalityfits.com/img/menstshirt.png"
alt="Card image cap"
/>
</div>
</div>
</Link>
</div>
<div className="col-lg-4 ">
<Link
to={{
pathname: "/Collections/" + "LGBT",
key: Math.random,
state: { sentinfo: "LGBT", name: false, cat: true },
}}
>
<div className="card position-relative">
<div className="card-img-wrap right">
<img
className="card-img-top ml-auto mt-2 img"
src="http://equalityfits.com/img/menstshirt.png"
alt="Card image cap"
></img>
</div>
</div>
</Link>
</div>
<div className="col-lg-4 mr-auto">
<Link
to={{
pathname: "/Collections/" + "LGBT",
key: Math.random,
state: { sentinfo: "LGBT", name: false, cat: true },
}}
>
<div className="card">
<div className="card-img-wrap">
<img
className="card-img-top mr-auto mt-2 img"
src="http://equalityfits.com/img/womenstshirt.png"
alt="Card image cap"
/>
</div>
</div>
</Link>
</div>
</div>
</div>
<div className="row ml-auto mr-auto mt-5 w-75">
<div className="col-lg-9 col-sm-12 m-auto p-0 mt-5">
<h1
className="text-center font-weight-bold mt-5"
style={{ marginLeft: "9px" }}
>
Best Selling
</h1>
<hr style={{ borderTop: "3px solid rgba(0, 0, 0, 0.1)" }}></hr>
<div className="row justify-content-center">
**{this.renderRows()}** <-----------------Where i call upon the function
</div>
</div>
</div>
</div>
);
}
export default HomePageBody;
I call upon the function at the bottom, i put arrows next to it to make it easier.

You are no longer in a class, so the this context no longer makes sense. Just change it to renderRows().

renderRows is no longer a method on you class, but rather a function in your component. Therefore instead of this.renderRows(), you call it using renderRows().

Passing my form component to another component | Reactjs

Hi i have a form component where my form data is, I'm trying to pass it into another component called "airtime-data-mtn.js" to make up part of a whole page. i.e the form is just a part of the whole page, the airtime-data component already has information rendered, page information. Note: I had done something similar where i passed a form into another component but there in the render method I was not rendering other information about the page just the form alone
since it is a form i simply tried passing it like <mtnform onSubmit={this.handleSubmit}/> but I noticed instead of it to be blue to show it is a form it's doesn't change color. I believe it is seeing it as JSX and not a form. When I add a route and use the form as the component it renders the form as expected but when i try to pass it into the airtime component, it does not work as expected
render() {
return (
<form
name="airtime-form"
className="airtime-form"
onSubmit={this.handleSubmit}
>
<div style={{ margin: "20px 0" }}>
<select
ref="constantVal"
className="select"
onChange={this.handleDropDownChange}
>
{this.state.obj.map(item => {
return (
<option key={item.Id} value={item.Name}>
{item.Name}
</option>
);
})}
</select>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="number"
value={this.state.Price}
onChange={this.handlePriceChange}
placeholder="Amount"
/>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="text"
value={this.state.ParameterRegEx}
onChange={this.handleNumberChange}
placeholder="Phone Number"
/>
</div>
<div style={{ margin: "20px 0" }}>
<input
type="text"
value={this.state.Email}
onChange={this.handleEmailChange}
/>
</div>
<div style={{ margin: "20px 0", fontSize: "20px" }}>
*Email is required for notification purposes
</div>
<div>
<button type="submit" className="btn btn-submit">
Submit
</button>
</div>
</form>
);
}
render() {
const { isLoaded } = this.state;
if (!isLoaded) {
return (
<div className="center">
<img src={Spinner} alt="loading spinner" />
</div>
);
} else {
return (
<body
style={{
backgroundImage: "url(" + background + ")",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}}
>
<section>
<div className="row">
<div
className="col span-2-of-3"
style={{ backgroundColor: "#3C444C" }}
>
<div className="row">
<h2>
<img
src={mtn}
alt="mtn logo"
style={{ display: "inline-block" }}
/>
Airtime & Data
</h2>
</div>
<div className="row">
<mtnform></mtnform>
</div>
</div>
<div className="col span-1-of-3">
<div className="rhs-content">
<div className="row">
<h2 className="text-transform">use payarena today</h2>
</div>
<div className="row">
<h3 className="select-headings">Airtime & Data</h3>
<form onSubmit={this.onUrlSelected.bind(this)}>
<select ref="items" className="select">
{this.state.airtime.map(item => {
return (
<option key={item.id} value={item.Url}>
{item.Name}
</option>
);
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">Bills Payment</h3>
<form onSubmit={this.onSecondUrlSelected.bind(this)}>
<select ref="items1" className="select">
{this.state.bills.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">Collections & Levies</h3>
<form onSubmit={this.onThirdUrlSelected}>
<select ref="items2" className="select">
{this.state.collectionsAndLevies.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<h3 className="select-headings">The Lotteries</h3>
<form onSubmit={this.onFourthUrlSelected}>
<select ref="items3" className="select">
{this.state.lottery.map(item => {
return <option value={item.Url}>{item.Name}</option>;
})}
</select>
<button type="submit" className="btn btn-submit">
Go
</button>
</form>
</div>
<div className="row">
<p>Pay using any of the following</p>
<img src={logomask} alt="logo mask" className="logo-mask" />
</div>
</div>
{/*eslint-disable-next-line react/jsx-no-duplicate-props*/}
<section className="row" className="next-rhs">
<p>Download the Payarena app</p>
<ul className="main-nav">
<li>
<img src={googlestore} alt="google play store" />
</li>
<li>
<img src={appstore} alt="app store" />
</li>
</ul>
</section>
</div>
</div>
</section>
<footer className="footer">
<div className="row">
<div className="col span-1-of-3">
<img
src={palogo}
alt="pa-logo"
style={{
display: "block",
marginLeft: "30px;"
}}
/>
<p>An innovation from Unified Payments Limited</p>
</div>
<div className="col span-2-of-3">
<div className="row">
<div className="col span-1-of-3">
<h2>Page Links</h2>
<p>
{" "}
<a
href="/about"
style={{ textDecoration: "none", color: "white" }}
>
About Us
</a>
</p>
<p>
{" "}
<a
href="/services"
style={{ textDecoration: "none", color: "white" }}
>
Our Services
</a>
</p>
<p>
{" "}
<a
href="/about"
style={{ textDecoration: "none", color: "white" }}
>
The Team
</a>
</p>
</div>
<div className="col span-1-of-3">
<h2>Support Links</h2>
<p>
<a
href="/contact"
style={{ textDecoration: "none", color: "white" }}
>
Contact Us
</a>
</p>
<p>
<a
href="/faqs"
style={{ textDecoration: "none", color: "white" }}
>
FAQs
</a>
</p>
</div>
<div className="col span-1-of-3">
<h2>Social Links</h2>
<p>
{" "}
<a
href="https:/www.twitter.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-twitter"
style={{ color: "white", margin: "0 10px" }}
/>
Twitter
</a>
</p>
<p>
{" "}
<a
href="https://www.facebook.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-facebook"
style={{ color: "white", margin: "0 10px" }}
/>
Facebook
</a>
</p>
<p>
{" "}
<a
href="https://www.linkedin.com"
style={{ textDecoration: "none", color: "white" }}
>
<i
className="icon ion-logo-linkedin"
style={{ color: "white", margin: "0 10px" }}
/>
Linkedin
</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<footer
className="footer"
style={{ backgroundColor: "white", color: "black" }}
>
<div className="row">
<p style={{ float: "left" }}>
Copyright © Unified Payments 2019.
</p>
</div>
</footer>
</body>
);
}
}
Please any help would be fantastic. I'm stuck and trumped

How can I get a dynamic value of href and id's of the card in React JS

This is my first question in stackoverflow, I am still learning how to code and it might be a newbie question.
But, is it possible to have a dynamic href and id values when I want to map my data with axios to become cards? Because if I run my code, the card that will work (one that can collapse) is just the first one, the others did not work. This is my code (sorry the code isnt the same with the real file in my vscode cos my real file was becoming a chaos.)
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href="#colla">
{item.model} - {item.tahun}
</a>
</div>
<div id="colla" className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

You can use unique ID for every href using index value in the map and also map the index in accordion div. See the below code for sample
render() {
const mobillist = this.state.dataku.map((item, index) => {
return (
<div className="container-fluid" style={{ marginTop: "100px" }}>
<div id="accordion">
<div className="card">
<div className="card-header">
<a className="card-link" data-toggle="collapse" href={"#colla"+ index}>
{item.model} - {item.tahun}
</a>
</div>
<div id={"colla"+ index} className="collapse show" data-parent="#accordion">
<div className="card-body">
<div className="row">
<div className="col">
<h4> ini menu 1 </h4>
</div>
<div className="col">
<center> <h4> ini menu 2 </h4></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
return (
<div>
{mobillist}
</div>

Sorting an array of objects in ReactJS from an API endpoint

In short: I am working on a Bicycle collection app, where I pull an Array of objects from my endpoint to display on a page. I now want to add the functionality of sorting/filtering the bicycles based on year, brand and size when the user selects a field in the dropdown menu. How do I accomplish that inside by component in react?
Similar to this in the browser: /category?year=2000&size=XL&brand=cervelo, I want to do that from my component when a field in the dropdown is selected.
This is my component:
import React, { Component } from 'react'
import actions from '../../actions'
import { Link } from 'react-router'
import { connect } from 'react-redux'
class Category extends Component {
constructor(){
super()
this.state = {
}
}
componentDidMount(){
this.props.getAllBikes()
}
render(){
return(
<div>
<div className="col-xs-12 col-md-2" style={{paddingTop: 0, paddingRight: '70px', left: '5.5%', top: '-4px'}}>
<aside>
<ul className="nav-coupon-category panel">
<li className="all-cat">
<a className="font-14" href="#">Kategorier:</a>
</li>
<li><i className="fa fa-angle-double-right"></i>Tri Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Racercykler
</li>
<li><i className="fa fa-angle-double-right"></i>Mountainbikes
</li>
<li><i className="fa fa-angle-double-right"></i>Bane Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Cross Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Hverdags Cykler
</li>
<li><i className="fa fa-angle-double-right"></i>Vinter Racercykler
</li>
</ul>
</aside>
</div>
<main id="mainContent" className="main-content">
<div className="page-container ptb-60">
<div className="container">
<div className="contact-area contact-area-v1 panel">
<div className="row row-tb-20">
<div style={{paddingBottom: 0}} className="col-xs-12">
<div className="filter-search">
<div className="row">
<div style={{right: '-30px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '232%'}} className="form-control input-sm">
<option>Mærke/Brand</option>
<option>Giant</option>
<option>Trek</option>
<option>Specialized</option>
<option>S-Works</option>
<option>Cannondale</option>
<option>Cervelo</option>
<option>Scott</option>
<option>Bianchi</option>
<option>Canyon</option>
<option>Cube</option>
<option>Pinarello</option>
<option>Fuji</option>
<option>Colnago</option>
<option>Felt</option>
<option>Wilier</option>
<option>BH</option>
</select>
</div>
</div>
<div style={{right: '-13px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '324%'}} className="form-control input-sm">
<option>Størrelse</option>
<option>50</option>
<option>52</option>
<option>54</option>
<option>56</option>
<option>58</option>
<option>60</option>
<option>62</option>
</select>
</div>
</div>
<div className="col-6 col-md-3 filter-height">
<div style={{right: '13px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '490%'}} className="form-control input-sm">
<option>Årgang</option>
<option>Før</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
</select>
</div>
</div>
</div>
<div className="col-6 col-md-3 filter-height">
<div style={{right: '31px'}} className="col-6 col-md-3 filter-height">
<div className="right-10 pos-tb-center">
<select style={{width: '494%'}} className="form-control input-sm">
<option>Sorter Efter</option>
<option>Nyeste</option>
<option>Pris: Lav til Høj</option>
<option>Pris: Høj til Lav</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="ptb-30 prl-30">
<div className="row row-tb-20">
{(this.props.category == null) ? null :
this.props.category.map((bike, i) => {
return (
<div key={i} className="col-sm-6 col-md-4 col-lg-3">
<div className="coupon-single panel t-center salg-shadow">
<div className="row">
<div className="col-xs-12">
<div className="text-center p-20">
<a href="#">
<img src={bike.attachments[0]}/>
</a>
</div>
</div>
<div style={{maxHeight: '220px', minHeight: '220px'}} className="col-xs-12">
<div className="panel-body">
<ul className="deal-meta list-inline mb-10">
<li style={{textTransform: 'capitalize'}} className="color-muted"><i className="ico fa fa-tag mr-5"></i>{bike.brand}</li>
<li className="color-muted"><i className="ico fa fa-cube mr-5"></i>{bike.size}</li>
<li className="color-muted"><i className="ico fa fa-thumb-tack mr-5"></i>{bike.year}</li>
</ul>
<h4 className="color-green mb-10 t-uppercase">DKK {bike.price}.00</h4>
<h5 className="deal-title mb-10">
{bike.title}
</h5>
<ul className="deal-meta list-inline mb-10">
<li style={{textTransform: 'capitalize'}} className="color-muted"><i className="ico fa fa-map-marker mr-5"></i>{bike.location}</li>
<br/>
<li className="color-muted"><i className="ico fa fa-user-circle mr-5"></i>{bike.name}</li>
</ul>
<div className="showcode">
<button className="btn btn-sm btn block more-info">Vis Mere</button>
<button className="btn btn-sm btn block more-info">Kontakt Info</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
})
}
</div>
</div>
</div>
</div>
</div>
</main>
</div>
)
}
}
const stateToProps = (state) => {
return {
category: state.category.allBikes
}
}
const dispatchToProps = (dispatch) => {
return {
getAllBikes: (bike) => dispatch(actions.getAllBikes(bike))
}
}
export default connect(stateToProps, dispatchToProps)(Category)

If you are using React Router v3 or v2, you can access the query string params from the location.query object that passed to your component.
For example:
<Route path="category" component={Category} />
And then in your Category component, you can do this.props.location.query.year etc...
EDIT
Forgot to mention that react router v4 doesnt support this. you can read about other solution here
EDIT #2
Following you other question in comments:
Given the url you posted:
localhost:3000/category?year=2000&size=XL&brand=cervelo
By accesing this.props.location.query.year will return 2000
and this.props.location.query.brand will return cervelo and so on...