Develop Reference

map.panTo does not animate when moving back to the center

I have a reactjs app that shows the google map. In the map section, there is a center marker. I also have button that when clicked, the map should smoothly move back to the center. Now, the button does work, but it does not animate. Kindly help.
The center is from derived coordinates. Also, if anyone knows how I can define the coordinates using the geolocator to get the current location on the map, kindly help.
This is my code
import React, { useState, useEffect, useRef } from 'react';
import { Link, useNavigate } from "react-router-dom";
import Menubar from "../../components/menubar/Menubar"
import axios from 'axios';
import { UserContext } from "../../UserContext";
import toast, { Toaster } from 'react-hot-toast';
import ActionSheet from "actionsheet-react";
import { useJsApiLoader, GoogleMap, Marker, Autocomplete, DirectionsRenderer } from '#react-google-maps/api'
import Skeleton from 'react-loading-skeleton';
function AddFarm() {
let navigate = useNavigate();
const [loading, setLoading] = useState(false);
const user = React.useContext(UserContext);
const [show, setShow] = useState(false);
const ref = useRef();
const handleOpen = () => {
ref.current.open();
};
const handleClose = () => {
ref.current.close();
}
const center = { lat: -1.1797562, lng: 36.9064927 }
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
libraries: ['places'],
})
const [map, setMap] = useState(/** #type google.maps.Map */(null))
if (!isLoaded) {
return <Skeleton />
}
return (
<div>
<Menubar />
<div className="appHeader bg-primary text-light">
<div className="left">
<a onClick={() => navigate(-1)} className="headerButton goBack">
<i className="fi fi-rr-angle-left"></i> </a>
</div>
<div className="pageTitle">Add Farm</div>
<div className="right">
</div>
</div>
<div id="appCapsule">
<div className="section mt-3 mb-3">
<form onSubmit={submitFarm}>
<div className="form-group basic">
<div className="input-wrapper">
<label className="label" >Name</label>
<input type="text" className="form-control" onChange={handleInput} value={farmInput.farmname} name="farmname" placeholder=" Enter farm name" />
<i className="clear-input">
<i className="fi fi-rr-cross-circle"></i> </i>
</div>
<div className="invalid-feedback">
{errorlist.farmname}
</div>
<div className="input-info">Give your farm a name</div>
</div>
<div className="form-group basic">
<div className="input-wrapper">
<label className="label" >County</label>
<select className="form-control custom-select" onChange={handleInput} value={farmInput.county_id} name="county_id">
<option value="0">Select County</option>
{
county && county.map((item) => {
return (
<option value={item.id} key={item.id}>{item.countyname}</option>
)
})
}
</select>
</div>
<div className="invalid-feedback">
{errorlist.county_id}
</div>
<div className="input-info">Enter the county your farm is</div>
</div>
<div className="form-group basic">
<div className="input-wrapper">
<label className="label" >Location</label>
<input type="text" className="form-control" onChange={handleInput} value={farmInput.farmlocation} name="farmlocation"
placeholder="Enter farm location" />
<i className="clear-input">
<i className="fi fi-rr-cross-circle"></i> </i>
</div>
<div className="input-info">Enter exactly where you farm is located</div>
</div>
<div className="mt-2">
<button onClick={handleOpen} className="btn btn-primary btn-block btn-lg">Map your Farm</button>
</div>
<ActionSheet
ref={ref}
mouseEnable={false}
touchEnable={false}
sheetStyle={{
borderTopLeftRadius: 0,
borderTopRightRadius: 0,
height: '100%'
}}>
<div className="appHeader bg-primary text-light">
<div className="left">
<a onClick={() => setShow(true)} className="headerButton toggle-searchbox">
<i className="fi fi-rr-search"></i> </a>
</div>
<div className="pageTitle">Map your Farm</div>
<div className="right">
<a onClick={handleClose} className="headerButton">
<i className="fi fi-rr-cross"></i></a>
</div>
</div>
<div id="search" className={show ? "appHeader no-boxshadow show" : "appHeader"}>
<div className="search-form">
<div className="form-group searchbox">
<input type="text" className="form-control" placeholder="Search..." />
<i className="input-icon">
<i className="fi fi-rr-search"></i> </i>
<a onClick={() => setShow(false)} className="ml-1 close toggle-searchbox">
<i className="fi fi-rr-cross-circle"></i> </a>
</div>
</div>
</div>
<div className="section full mt-6 h100">
<GoogleMap
center={center}
zoom={18}
mapContainerStyle={{ width: '100%', height: '100%' }}
options={{
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
fullscreenControl: false,
mapTypeId: "satellite"
}}
onLoad={map => setMap(map)}
>
<Marker position={center} />
</GoogleMap>
<div class="fab-button animate bottom-right dropdown show bottom-high">
<a onClick={() => {
map.panTo(center, { animate: true, duration: 2.0 })
map.setZoom(18)
}} class="fab" data-toggle="dropdown" aria-expanded="true">
<i class="fi fi-rr-marker"></i>
</a>
</div>
<div className="form-button-group transparent-bg">
<button className="btn btn-primary btn-block btn-lg spinner-btn">{loading ? <><span className="spinner-border spinner-border-sm mr-05" role="status" aria-hidden="true"></span>Updating Profile</> : <>Update Profile</>}</button>
</div>
</div>
</ActionSheet>
</form>
</div>
</div>
</div>
);
}
export default AddFarm;

Uncaught TypeError: Cannot read properties of undefined (reading 'params') react

I am creating an ecommerce with react. I'm trying to create a function who shows the product details. But I do not know how to approach this problem. After to be linked to the url of the details in the browser, the url is the right one, but the details are not renderer and get the following message:
ProductDetails.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'params')
Down here you can read the ProductDetails.js and App.js files.
This is my react-router-dom version v6.4.1
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import Home from './components/layout/Home'
import './App.css';
import ProductDetails from './components/product/ProductDetails';
function App() {
return(
<>
<Header/>
<Footer/>
<Routes>
<Route path='/' element={<Home/>} />
<Route path='/product/:id' element={<ProductDetails/>} />
<Route/>
</Routes>
</>
)
}
export default App;
import React, {useEffect, Fragment} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getProductDetails, clearErrors } from '../../actions/productActions';
import { useAlert } from 'react-alert';
import Loader from '../layout/Loader';
import MetaData from '../layout/MetaData';
const ProductDetails = ({match}) => {
const dispatch = useDispatch();
const alert = useAlert();
const {loading, error, product} = useSelector(state => state.productDetails)
useEffect(()=>{
dispatch(getProductDetails(match.params.id))
if(error){
alert.error(error);
dispatch(clearErrors());
}
},[dispatch, alert, error, match.params.id])
return (
<Fragment>
{loading ? <Loader/> : (
<Fragment>
<div className="row f-flex justify-content-around">
<div className="col-12 col-lg-5 img-fluid" id="product_image">
<img src="https://i5.walmartimages.com/asr/1223a935-2a61-480a-95a1-21904ff8986c_1.17fa3d7870e3d9b1248da7b1144787f5.jpeg?odnWidth=undefined&odnHeight=undefined&odnBg=ffffff" alt="sdf" height="500" width="500"/>
</div>
<div className="col-12 col-lg-5 mt-5">
<h3>"{product.name}</h3>
<p id="product_id">Product # sklfjdk35fsdf5090</p>
<hr/>
<div className="rating-outer">
<div className="rating-inner"></div>
</div>
<span id="no_of_reviews">(5 Reviews)</span>
<hr/>
<p id="product_price">$108.00</p>
<div className="stockCounter d-inline">
<span className="btn btn-danger minus">-</span>
<input type="number" className="form-control count d-inline" value="1" readOnly />
<span className="btn btn-primary plus">+</span>
</div>
<button type="button" id="cart_btn" className="btn btn-primary d-inline ml-4">Add to Cart</button>
<hr/>
<p>Status: <span id="stock_status">In Stock</span></p>
<hr/>
<h4 className="mt-2">Description:</h4>
<p>Binge on movies and TV episodes, news, sports, music and more! We insisted on 720p High Definition for this 32" LED TV, bringing out more lifelike color, texture and detail. We also partnered with Roku to bring you the best possible content with thousands of channels to choose from, conveniently presented through your own custom home screen.</p>
<hr/>
<p id="product_seller mb-3">Sold by: <strong>Amazon</strong></p>
<button id="review_btn" type="button" className="btn btn-primary mt-4" data-toggle="modal" data-target="#ratingModal">
Submit Your Review
</button>
<div className="row mt-2 mb-5">
<div className="rating w-50">
<div className="modal fade" id="ratingModal" tabIndex="-1" role="dialog" aria-labelledby="ratingModalLabel" aria-hidden="true">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="ratingModalLabel">Submit Review</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<ul className="stars" >
<li className="star"><i className="fa fa-star"></i></li>
<li className="star"><i className="fa fa-star"></i></li>
<li className="star"><i className="fa fa-star"></i></li>
<li className="star"><i className="fa fa-star"></i></li>
<li className="star"><i className="fa fa-star"></i></li>
</ul>
<textarea name="review" id="review" className="form-control mt-3">
</textarea>
<button className="btn my-3 float-right review-btn px-4 text-white" data-dismiss="modal" aria-label="Close">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Fragment>
)}
</Fragment>
)
}
export default ProductDetails

1-) Add the following line of code at the beginning of your class:
import { useParams } from 'react-router-dom';
2-) Then add this function above your class (copy it exactly):
export function withRouter(Children){
return(props)=>{
const match = {params: useParams()};
return <Children {...props} match = {match}/>
}
}
3-) Next, change your class definition to this:
class EditExercises extends Component{
4-) Add the following line of code at the end of your class:
export default withRouter(EditExercises);

How do I Import js file to React js file

JavaScript File.
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
I have this javascript Code, I want to use this in my React file.
This is my React js file Code.
import React, { Component } from 'react'
// import './js/main'
class Login extends Component {
render() {
return (
<div>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div class="social-container">
<i class="fa fa-facebook-f" style={{color: 'blue'}} aria-hidden="true"></i>
<i class="fa fa-google-plus" style={{color: 'red'}} aria-hidden="true"></i>
<i class="fa fa-linkedin" style={{color: 'blue'}} aria-hidden="true"></i>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div class="social-container">
<i class="fa fa-facebook-f" style={{color: 'blue'}} aria-hidden="true"></i>
<i class="fa fa-google-plus" style={{color: 'red'}} aria-hidden="true"></i>
<i class="fa fa-linkedin" style={{color: 'blue'}} aria-hidden="true"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Login
In this code there onclick events for scrolling the login form and get the signup page.
How do I use Javascript to perform click events. I am new to React. Help me to get out of this.

You should be doing the following
Create two separate components for signUpButton.js and signInButton.js, each. These components should include their respective event handlers as well
Import these two components into your main component (your main React.js file) and use them.
import { SignUpButton } from './signUpButton.js'
import { SignInButton } from './signUpButton.js'
Right now, in your JavaScript file, you are trying to directly access DOM elements using document.getElementById. This is not recommended in React
Its important that you go through the core react concepts here and understand these thoroughly. This will definitely help you in the long run
https://reactjs.org/docs/hello-world.html
Event Handling in React
https://reactjs.org/docs/glossary.html#events

class Login extends Component {
constructor(props) {
super(props);
this.state = {addClass: false}
}
toggle() {
this.setState({addClass: !this.state.addClass});
}
render() {
let Class = ['container'];
if(this.state.addClass) {
Class.push('right-panel-active');
}
return (
<div>
<div className={Class.join(' ')} id="container">
Putting this is did a great Job to me. Working as Expected.
<button className="ghost" id="signIn" onClick={this.toggle.bind(this)}>{this.state.addClass}Log In</button>
And Calling this on Button click. Solved this after doing tones of Research. Feeling very Happy as new Beginner React js Developer.

Refactoring jQuery for react component

I am moving away from using jQuery to do some quick hides, shows and css changes because I am using components in react that need to be re-rendered and thus are not triggering the jQuery actions that need a page refresh. I think my issue is that I need to set the state in each component but I am a bit confused as to how. Here is an example of the jquery for this particular view:
<script type="text/javascript">
$(document).ready(function () {
$(".schedule-times").hide();
$(".final-check").hide();
$(".available-time").on('click', function () {
$(".schedule-times").toggle();
});
$(".schedule-button").on('click', function () {
$('.finalize-timeline').css("background", "#4CAF50");
$(".final-check").show();
});
});
</script>
Here is an example of a component I have written:
import React, { Component } from 'react';
import '../../App.css';
import Calendar from '../Calendar';
import { Link } from 'react-router';
class Schedule_3 extends Component {
render() {
return (
<div className="wow fadeIn">
<div className="container">
<div className="timeline">
<div className="col-md-12 offset-md-2">
<div className="row">
<div className="col-md-2 timeline-box">
<div className="timeline-badge active-timeline">
<i className="fa fa-check wow bounceInDown"></i>
</div>
<span>How do you want to schedule?</span>
</div>
<div className="col-md-2 timeline-box">
<div className="timeline-badge active-timeline">
<i className="fa fa-check wow bounceInDown"></i>
</div>
<span>Pick your lesson type</span>
</div>
<div className="col-md-2 timeline-box">
<div className="timeline-badge active-timeline">
</div>
<span>Find a time</span>
</div>
<div className="col-md-2 timeline-box">
<div className="timeline-badge" id="no_border">
</div>
<span>Finalize</span>
</div>
</div>
</div>
</div>
<div className="row">
<div className="container">
<div className="col-md-6 offset-md-3">
<Calendar />
</div>
</div>
</div><br />
<div className="row schedule-times">
<div className="col-md-12 offset-md-2">
<div className="row">
<div className="col-md-4 offset-md-1">
<i className="fa fa-clock"></i>
10:30AM
</div>
<div className="col-md-2 offset-md-1">
<Link to="Schedule_4">
<button className="btn btn-primary">
Book Now
</button>
</Link>
</div>
</div><br />
<div className="row">
<div className="col-md-4 offset-md-1">
<i className="fa fa-clock"></i>
11:00AM
</div>
<div className="col-md-2 offset-md-1">
<button className="btn btn-primary">
Book Now
</button>
</div>
</div><br />
<div className="row">
<div className="col-md-4 offset-md-1">
<i className="fa fa-clock"></i>
11:30AM
</div>
<div className="col-md-2 offset-md-1">
<button className="btn btn-primary">
Book Now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Schedule_3;

Looking at your code I would suggest the first thing you need to do is split it into smaller, more manageable and more readable components that are responsible for 1 thing.
As you have posted a big example I cannot show you how to do it for every case you have, but I can give you a simple example that can be adapted for your use cases.
class ToggleContent extends React.Component {
constructor() {
super();
this.state = { hidden: true };
this.toggleContent = this.toggleContent.bind(this);
}
toggleContent() {
this.setState(prevState => ({
hidden: !prevState.hidden
}));
}
render() {
const { hidden } = this.state;
const { children } = this.props;
return (
<div>
<button onClick={ this.toggleContent }>Toggle</button>
<div>
{ !hidden && children }
</div>
</div>
);
}
}
You can use this component like this <ToggleContent>Hello World</ToggleContent> and it will toggle visibility of Hello World on the button press. You can put anything inside of this, including other components, it doesn't have to just be text.
You can see an example of it running here.
You can see the state of whether the children are hidden or not is held in the component this.state = { hidden: true };.
The children are then rendered if it is not hidden, if !hidden === true. We can see that inline here { !hidden && children }.
The toggleContent method is then using the previous state to switch back and forth between hidden and showing.
toggleContent() {
this.setState(prevState => ({
hidden: !prevState.hidden
}));
}

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...