How to fix when React JS Pagination component does Nothing on Click? - javascript

Im using react js Pagination component and wrote the code as mentioned in documentation but it does nothing onClick.
import Pagination from "react-js-pagination"
and here i use it:
{this.state.spareParts.map((part, index) =>
<Col md="3" lg="3" sm="6" xs="6" xl="3">
<Card>
<h4>
<b> {part.Name} </b>
</h4>
<h4> Rs. {part.Price} </h4>
<h5> By: {part.CompanyName} </h5>
</Card>
</Col>
)}
<Pagination
data={this.state.spareParts}
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={50}
pageRangeDisplayed={5}
onChange={this.handlePageChange} />
and here is handlePageChange function:
handlePageChange(pageNumber)
{
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
Can someone tell me what Im doing wrong here becoz of which Im getting no results on click on pagination bar.

It's working for me. Can you try below code.
Why do you need to send data(spareParts) as the component doesn't take data as prop.
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 15
};
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}
render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={this.handlePageChange}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Happy Coding!!!

For someone who looking for solutions in 2022
// Try to add event.stopPropagation();
<a className={`page-link ${page == props.currentPage ? 'isDisabled-link' : ''}`} href="#"
onClick={(event) => { event.stopPropagation(); props.pageChanged(page) }}
>
{page}
</a>

Related

Swapped useState to useSelector(redux) and it's not working anymore

build this part of the code with useState initially and everything worked perfectly but I need to share this state with my main component (no relationships between those two) and decided to use Redux but def something is wrong, any ideas?
Here's the console error:
MUI: The value provided to the Tabs component is invalid.
None of the Tabs' children match with "-1".
You can provide one of the following values: 0, 1, 2.
import { React } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import '../../css/SideBar.css';
import { UilSignOutAlt } from '#iconscout/react-unicons';
import Logo from '../../../../assets/img/companyLogo.jpg';
import { SidebarData } from '../../Data/Data';
import { setDashboard } from '../../../../app/actions';
function SideBar() {
const selected = useSelector((state) => state.dashboard);
const dispatch = useDispatch();
return (
<div className="Sidebar">
{/* logo */}
<div className="logo">
<img src={Logo} alt="logo" />
<span>Company Name</span>
</div>
{/* menu */}
<div className="menu">
{SidebarData.map((item, index) => (
/* eslint-disable */
<div
role='menu'
className={selected === index ? 'menuItem active' : 'menuItem'}
key={index}
onClick={() => dispatch(setDashboard(index))}
onKeyDown={() => dispatch(setDashboard(index))}
>
<item.icon />
<span>{item.heading}</span>
</div>
))}
<div className='menuItem'>
<UilSignOutAlt />
</div>
</div>
</div>
);
}
export default SideBar;

element manipulation in react

So I have a series of code where a button in the Header.jsx file that if clicked, it will display the content of the Notification.jsx file. The problem here is, I don't exactly know how can I display the content of Notification.jsx in index.js. I tried using conditional statements and is it possible to hide the h1 element once the button is clicked?
Header.jsx
import React from "react";
import { Button } from "#mui/material";
import { IconButton } from "#mui/material";
import NotificationsIcon from "#mui/icons-material/Notifications";
import SearchIcon from "#mui/icons-material/Search";
import Menu from "#mui/material/Menu";
import MenuItem from "#mui/material/MenuItem";
import FullNotifList from "./FullNotifList"
export default function Header() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<Button
id="basic-button"
aria-controls={open ? "basic-menu" : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
<IconButton>
<NotificationsIcon />
</IconButton>
</Button>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": "basic-button",
}}
>
{/* Button needs to be clicked in order to display Notification.jsx */}
<Button variant="contained">Notification Center</Button>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
<IconButton>
<SearchIcon />
</IconButton>
</div>
);
}
Notification.jsx
import React from "react";
export default function Notification(){
return(
<div>
<ul>
<li> Hello </li>
<li> Hello </li>
<li> Hello </li>
<li> Hello </li>
</ul>
</div>
)
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import Header from './Header'
import './index.css'
import Footer from './Footer';
import Notification from './Notification';
export default function Page(props) {
const [isClicked, setIsClicked] = React.useState(false)
function showHide(e) {
setIsClicked(true)
};
return(
<div className='main'>
<Header onClick={showHide}/>
{isClicked && <Notification />}
<h1> Sample body </h1>
<Footer />
</div>
)
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
Here is the sandbox link: https://codesandbox.io/s/friendly-darkness-9u5s22?file=/src/index.js
You just need to create a state property to handle if the element is visible or not (ex: showNotification ) defaulting to false:
const [showNotification, setShowNotification] = React.useState(false);
Then using the button click event to set it to true
<Button variant="contained" onClick={()=>{setShowNotification(true)}}>Notification Center</Button>
Then you implement conditional rendering by using the && operator inside JSX for the return, something like :
{showNotification && <Notification />}
The problem is that your Header component doesn't have prop onClick, so nothing is executing.

Template Literals in React for bootstrap and css modules

Hi I want to use bootstrap and css modules together in react but I am having trouble understanding how. I thought I could use template literals to achieve this purpose.
Here is the code below:
Login.tsx
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles.background-color-main} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
This gives me an error in the className, can anyone show me how I am supposed to properly use bootstrap and my own custom css modules together?
My Login.module.css is here:
.background-color-main {
background-color: #87BFFF;
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
}
The problem here is in property name background-color-main since you have used - casing. you should access the property by LoginStyles["background-color-main"].
Here is the corrected code
import React from "react";
import LoginStyles from "../css/Login.module.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
class Login extends React.Component {
render() {
return (
<div className={`${LoginStyles["background-color-main"]} d-flex align-items-center p-4`}>
<Container fluid={true}>
<Row>
<Col>
Hello sir
</Col>
</Row>
</Container>
</div>
);
}
}
I've update the same working code here codesandbox

React Hooks trying to useState in array ref

I'm trying to work with Hooks in react but i have a doubt about useState and References. My problem is because i want to create multiple references in my jsx but i dont know how use the usestate like a Array, well in the insert of the usestate data.
import React, { useState, useEffect } from "react";
import { Row, Col, Image, ListGroup, Container } from "react-bootstrap";
import AOS from "aos";
import "./css/App.css";
import "aos/dist/aos.css";
import Skills from "./Components/Skills";
import Work from "./Components/Work";
const App = () => {
const [ref, setRef] = useState([]);
useEffect(() => {
AOS.init({
duration: 2000
});
});
function handleOnClick(event) {
ref.scrollIntoView();
}
return (
<div className="App">
<Row>
<Col className="menu text-center" lg={4}>
<div className="picture">
<Image
src={process.env.PUBLIC_URL + "/Images/picture.jpg"}
roundedCircle
/>
</div>
<h1 className="menu-name">Fulanito Detal</h1>
<h4 className="menu-office">Software Engineer - Web Developer</h4>
<div>
<Row>
<Col lg={3}></Col>
<Col lg={6} className="menu-text">
<ListGroup>
<ListGroup.Item
onClick={event => handleOnClick(event)}
active
>
ABOUT
</ListGroup.Item>
<ListGroup.Item>WORK EXPERIENCE</ListGroup.Item>
<ListGroup.Item>EDUCATION</ListGroup.Item>
<ListGroup.Item>SKILLS</ListGroup.Item>
<ListGroup.Item>CONTACT</ListGroup.Item>
</ListGroup>
</Col>
<Col lg={3}></Col>
</Row>
</div>
</Col>
<Col className="info text-center" lg={8}>
<Container>
<div className="about"></div>
<div
className="work"
ref={ref => {
setRef(ref);
}}
>
<Work />
</div>
<div className="education"></div>
<div
className="skills"
ref={ref => {
setRef(ref);
}}
>
<Skills />
</div>
<div className="contact"></div>
</Container>
</Col>
</Row>
</div>
);
};
export default App;
The ref works fine just with one. If clicked about redirect to skills, but i want to use state like array to work with all references but i'm stuck with this one. Thanks for any help!
Here is a simplified example of using the useRef hook:
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = () => {
const work = React.useRef();
const skills = React.useRef();
return (
<div>
<button onClick={() => work.current.scrollIntoView()}>
WORK EXPERIENCE
</button>
<button onClick={() => skills.current.scrollIntoView()}>SKILLS</button>
<div className="another" />
<div className="work" ref={work}>
WORK SECTION
</div>
<div className="skills" ref={skills}>
SKILL SECTIONS
</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

React Props Undefined

I am working on the React Recipe Box project from Free Code Camp. I have a parent component that displays recipe names, which it receives as props. The recipe name can be clicked to display a child component that then has the same props passed down to the child component to display information about the ingredients. My problem is, when I click the recipe name, the props in the parent component become undefined. Ive googled a bunch, but I cant figure out why this is happening. Has anyone run into this before?
import React, { Component } from 'react';
import ShowRecipe from './recipeDetail';
class RecipeDetail extends Component {
constructor(props){
super(props)
this.state = {
isHidden:true
}
}
render() {
return (
<div className="card">
<div className="card-header">
<h5>
<button
className="btn btn-link"
onClick={() => {
this.setState({isHidden: !this.state.isHidden})
}}
>
{this.props.recipe.recipeName}
</button>
</h5>
</div>
{ !this.state.isHidden &&
<ShowRecipe
ingredients={this.props.recipe.ingredientsList}
/>
}
</div>
);
}
}
export default RecipeDetail;
this is where the props for RecipeDetail are coming from:
import React from 'react';
import RecipeDetail from './recipeDetail';
import { Jumbotron, ListGroup } from 'react-bootstrap';
const RecipeBoxHolder = ({recipes}) =>{
const recipesItems = recipes.map((recipe) => {
console.log(recipes);
return(
<RecipeDetail
key={recipe.recipeName}
recipe={recipe}
/>
)
})
return(
<div>
<Jumbotron className="jtron">
<h5>Recipes</h5>
<ListGroup>
{recipesItems}
</ListGroup>
</Jumbotron>
</div>
)
}
export default RecipeBoxHolder;
TypeError: Cannot read property 'recipeName' of undefined
RecipeDetail.render
src/components/recipeDetail.js:22
19 | <button
20 | className="btn btn-link"
21 | onClick={() => {this.setState({isHidden:
!this.state.isHidden})}} >
> 22 | {this.props.recipe.recipeName}
23 | </button>
24 |
25 | </h5>
this comes from a different component where the user enters inputs and its passed to the main parent component for the app
let recipeObject={
recipeName: this.state.recipe,
ingredientsList: this.state.ingredients
};
component where user inputs data, takes data and passes it back up to main parent component
import React, {Component} from 'react';
import {ListGroupItem} from 'react-bootstrap';
class AddModal extends Component{
constructor(props){
super(props)
this.state={
recipe: '',
ingredients: ''
}
}
render(){
let recipeObject={
recipeName: this.state.recipe,
ingredientsList: this.state.ingredients
};
return(
<ListGroupItem>
<div className="card">
<div className="card-header">
<span>Add Recipe</span> <i className="fas fa-utensils"></i>
</div>
<div className="card-body">
<label>Recipe</label>
<input value={this.state.recipe} onChange={event =>
this.setState({recipe: event.target.value})} type="text"
className="form-control"/>
<label className="add-ingredients-label">Add Ingredients</label>
<textarea value={this.state.ingredients} onChange={event =>
this.setState({ingredients: event.target.value})}
className="form-control"></textarea>
</div>
<div className="card-footer">
<button className="close-button btn btn-outline-danger btn-
sm">
Close
<i className="fas fa-times"></i>
</button>
<button onClick={e =>{this.props.addRecipe(recipeObject)}}
className="btn btn-outline-success btn-sm">
Add Recipe
<i className="fas fa-plus"></i>
</button>
</div>
</div>
</ListGroupItem>
);
}
}
export default AddModal;
this is the main parent component:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import RecipeBoxHolder from './components/recipeContainer';
import AddModal from './components/addRecipeModal';
import './style/index.css';
import {Button, Modal} from 'react-bootstrap';
class App extends Component{
constructor(props){
super(props);
this.state={
recipes:[],
showAddModal: false
}
}
render(){
const addRecipe = (recipeObject) =>{
this.setState(prevState => ({
recipes:[...prevState.recipes, recipeObject]}
))
}
return(
<div className="container">
<RecipeBoxHolder recipes={this.state.recipes} />
<Button
bsStyle="primary"
bsSize="large">
</Button>
<AddModal addRecipe={addRecipe} />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
#Esteban Trevino I put my findings into an answer because the comments become too long, however I do not have a solution as I could not reproduce your issue.
I copied your code into a create-react-app generated react scaffold, and it runs fine. In this gist you can see the file I made:
https://gist.github.com/femans/22324382a8e04390f6a0ece49b867708
I do want to point out that you should not use the recipeName as a key, because they are not unique by design. Better use the following construction:
const recipesItems = recipes.map((recipe, key) => {
return(
<RecipeDetail
key={key}
recipe={recipe}
...

Categories