I'm having a problem building a dropdown component. In the function to get the selected item I'm having this error :
Too many re-renders. React limits the number of renders to prevent an
infinite loop.
The code for the component :
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import '../../../App.css'
function Dropdown({ items }) {
//const [list, setList] = useState(items);
const [selectedItem, setSelectedItem] = useState(items[0]);
const [showItems, setShowItem] = useState(false);
const [setExpand, setExpandState] = useState("");
function toggleDropdown() {
setExpandState(setExpand === "" ? "dropdown-expanded dropdown-expanded-down" : "");
setShowItem(showItems === false ? true : false);
};
const Changed = (item) => {
setShowItem(false);
setSelectedItem(item);
}
return (
<div data-dropdown="" className={`dropdown-container dropdown ${setExpand}`} onClick={toggleDropdown} >
<div className="dropdown-display">
<div className="dropdown-display-content" >
<span data-expression="" class="OSFillParent"> {selectedItem.value} </span>
</div>
</div>
<div className="dropdown-list" style={{ display: showItems ? 'block' : 'none' }} >
<div className="scrollable-list scrollable-list-with-scroll">
{items.map(item =>
<div className="dropdown-popup-row" key={item.id} onClick={Changed(item)} > {item.value} </div>
)}
</div>
</div>
</div>
);
}
Dropdown.propTypes = {
items: PropTypes.array,
}
export default Dropdown;
The problem is on here onClick={Changed(item)}
You are calling this on each render, and it's modifying the state every render, so it gets called again recursively.
You can solve it by doing:
<div className="dropdown-popup-row"
key={item.id}
onClick={() => Changed(item)}>
{item.value}
</div>
Related
How to Add className or Remove ClassName using useRef
code follows
const refs = useRef("");
const clicka =()=>{ ref.current.classList.add('correct') }
<div onClick={()=>{clicka()}} refs={ref} className="js-choose-answer"><div>a</div>{user.opt1}</div></div>
i can Access className Value ref.current.className but unable to add
code
import React, { useState, useEffect,useRef} from 'react';
const Slugg = ({user}) => {
//onClick to set className "js-choose-answer correct"
return (
<div>
<div className="__options">
<div onClick={()=>{clicka(user._id)}} ref={ref} className="js-choose-answer"><div>a</div><{user.opt1} </div></div>
</div>
<div className="__options">
<div onClick={()=>{clicka(user._id)}} ref={ref} className="js-choose-answer"><div>a</div><{user.opt1} </div></div>
</div>
</div>
)
}
Try this using useState. Set a boolean corresponding to user id which rerenders the elements with classname correct
const [status, setStatus] = useState({});
const clicka =(userId)=>{
setStatus(prevStatus=>{
return {...prevStatus, [userId]: true}
})
}
<div onClick={()=>{clicka(user._id)}} className={`js-choose-answer ${status[user._id] ? 'correct': ''}`}><
<div>a</div><{user.opt1} </div></div>
</div>
I usually do this and it works
const currentElement = useRef(null)
const switchClassHandler = () => {
currentElement.current.classList.add('correct')
currentElement.current.classList.remove('error')
}
return (
<React.Fragment>
<div ref={currentElement} onClick={switchClassHandler} className={'global error'}>
hello
</div>
</React.Fragment>
)
I tried to add click handler on my code, the idea is when i click on my first card, the first card add new class "selected" nad when i click on my third card or else the third card or else will add new class "selected". There is a problem when i was clicking on any card it was always first card was selected. Please help me. Thank you.
Parent code
import React, { useState } from 'react';
import CardBus from '../CardBus/CardBus.component';
import './BusSelector.style.css'
function BusSelector() {
const [buses, setBuses] = useState([
{
busNumber: 1,
destination: 'Cibiru - Cicaheum',
stopTime: '09:20 - 09.45',
stopLocation: 'Jl.Jendral Sudirman',
isSelected: false
},
{
busNumber: 2,
destination: 'Cicaheum - Cibereum',
stopTime: '09:10 - 09.20',
stopLocation: 'Jl.Soekarno Hatta',
isSelected: false
},
]);
return (
<div className="bus-selector--container">
{buses.map((bus) => {
return <CardBus key={bus.busNumber} eachBus={bus} buses={buses} setBuses={setBuses} />
})}
</div>
);
}
export default BusSelector;
Child code:
import React from 'react';
import './CardBus.style.css';
import TimeProgressThin from '../../icon/Time_progress_thin.svg';
import PinLight from '../../icon/Pin_light_thin.svg';
function CardBus(props) {
const [isSelected, setIsSelected] = useState(false)
let { eachBus, buses, setBuses} = props;
const selectedHandler = () => {
if (isSelected) {
const card = document.querySelector('.card');
card.classList.add('selected');
return setIsSelected(!isSelected);
}
else {
const card = document.querySelector('.card');
card.classList.remove('selected');
return setIsSelected(!isSelected);
}
}
return (
<div key={eachBus.key} className="card" onClick={selectedHandler}>
<div className="bus--left">
<h1>{eachBus.busNumber}</h1>
</div>
<div className="bus--right">
<div className="title">
<h1>{`Armada ${eachBus.busNumber}`}</h1>
<h2>{eachBus.destination}</h2>
</div>
<div className="detail">
<div className="detail--item">
<div>
<img src={TimeProgressThin} alt="Time Progress Logo" />
</div>
<div className="detail_content">
<h3>Last stopped</h3>
<h3>{eachBus.stopTime}</h3>
</div>
</div>
<div className="detail--item">
<div>
<img src={PinLight} alt="Pin Light Logo" />
</div>
<div className="detail_content">
<h3>Location Stopped</h3>
<h3>{eachBus.stopLocation}</h3>
</div>
</div>
</div>
</div>
</div>
);
}
export default CardBus;
Allow multiple selections
function CardBus(props) {
const [isSelected, setIsSelected] = useState(false);
let { eachBus, buses, setBuses } = props;
return (
<div key={eachBus.key} className={`card ${isSelected ? 'selected' : ''}`} onClick={() => setIsSelected(!isSelected)}>
...
</div>
);
}
export default CardBus;
Allow single select
You can simplify the code a lot if you move the selected child logic to the parent.
Parent code:
function BusSelector() {
const [buses, setBuses] = useState([
{
busNumber: 1,
destination: 'Cibiru - Cicaheum',
stopTime: '09:20 - 09.45',
stopLocation: 'Jl.Jendral Sudirman',
isSelected: false
},
{
busNumber: 2,
destination: 'Cicaheum - Cibereum',
stopTime: '09:10 - 09.20',
stopLocation: 'Jl.Soekarno Hatta',
isSelected: false
},
]);
const [selectedBus, setSelectedBus] = useState(-1);
return (
<div className="bus-selector--container">
{buses.map((bus) => {
return <CardBus
key={bus.busNumber}
eachBus={bus}
buses={buses}
setBuses={setBuses}
onClick={() => setSelectedBus(bus.busNumber)}
isSelected={bus.busNumber === selectedBus} />;
})}
</div>
);
}
export default BusSelector;
Child code:
function CardBus(props) {
let { eachBus, isSelected, buses, setBuses, onClick } = props;
return (
<div key={eachBus.key} className={`card ${isSelected ? 'selected' : ''}`} onClick={onClick}>
...
</div>
);
}
export default CardBus;
I am trying to add a hint option to my quiz app.
If the 50/50 button is clicked I want to render the newAnswers array. else I want to render the shuffledAnswers array.
when I run this code I get
TypeError: Cannot read properties of null (reading 'useState')
What am I doing wrong here?
import React from "react";
import { useState } from "react/cjs/react.production.min";
import Card from "../UI/Card";
import "./DisplayQuestion.css";
import ProgressBar from "./Progress";
const DisplayQuestion = (props) => {
/*I used dangerouslySetInnerHTML to fix the quotes gibberish problem */
const [hint, setHint] = useState(false);
console.log("hint: ", hint);
let notBoolean = false;
const newAnswers = [
props.data.correct_answer,
props.data.incorrect_answers[0],
];
/*Helper functions */
// shuffles the answers
let shuffledAnswers = [
props.data.correct_answer,
...props.data.incorrect_answers,
].sort(() => Math.random() - 0.5);
if (shuffledAnswers.length > 2) {
notBoolean = true;
console.log("notBoolean");
}
const answersHintHandler = () => {
setHint(true);
console.log("hint: ", hint);
console.log(newAnswers);
};
let progress = Math.round((props.score / props.numOfQuestions) * 100);
return (
<div>
<h3 class="diff">Difficulty: {props.diff}</h3>
<div classname="Questions">
<Card>
<ProgressBar bgcolor="#99ccff" progress={progress} height={30} />
<h2>
Questions {props.index}/{props.numOfQuestions}
</h2>
<h2
className="question-text"
dangerouslySetInnerHTML={{
__html: props.data.question,
}}
/>
<ul>
{notBoolean ? (
<button onClick={answersHintHandler}>50/50</button>
) : (
<p></p>
)}
{hint
? newAnswers.map((answer) => {
return (
<li
onClick={() => props.handler(answer)}
dangerouslySetInnerHTML={{
__html: answer,
}}
></li>
);
})
: shuffledAnswers.map((answer) => {
return (
<li
onClick={() => props.handler(answer)}
dangerouslySetInnerHTML={{
__html: answer,
}}
></li>
);
})}
</ul>
</Card>
</div>
</div>
);
};
export default DisplayQuestion;
Replace 1st and 2nd line with
import React, { useState } from 'react'
You are importing useState from the wrong path x)
import { useState } from "react/cjs/react.production.min";
Care the automatic imports haha
Transform is not updating the style component below. I have console logged the state to ensure that it is changing and it was, just not the style component (it kept the color red).
import React, {useState} from 'react';
const Carousel = () => {
let [selectedIndex, setSelectedIndex] = useState(0)
const [cellCount,] = useState(9);
let [transform, setTransform] = useState({color: 'red'});
const prevButton = () => {
setSelectedIndex(selectedIndex-1);
setTransform({color: 'green !important'})
console.log(selectedIndex)
console.log(transform)
};
const nextButton = () => {
setSelectedIndex(selectedIndex+1);
setTransform({color: 'red !important'})
console.log(transform)
}
return (
<>
<div className="scene">
<div style={transform} className="carousel">
<div className="carousel__cell">1</div>
<div className="carousel__cell">2</div>
<div className="carousel__cell">3</div>
<div className="carousel__cell">4</div>
<div className="carousel__cell">5</div>
<div className="carousel__cell">6</div>
<div className="carousel__cell">7</div>
<div className="carousel__cell">8</div>
<div className="carousel__cell">9</div>
</div>
</div>
<button onClick={prevButton}>
Previous
</button>
<button onClick={nextButton}>
Next
</button>
</>
)
}
React inline style doesn't know the !important property. There is usually always a way to avoid using it, and it is better to do so.
If you just don't avoid using !important, it will work here.
If you have to set it, this would work:
import React, { useState } from 'react';
const Carousel = () => {
let [selectedIndex, setSelectedIndex] = useState(0);
let [transform, setTransform] = useState({ color: 'red' });
const prevButton = () => {
setSelectedIndex(selectedIndex - 1);
setTransform({ ...{ color: 'green' } });
// rotateCarousel();
console.log(selectedIndex);
console.log(transform);
};
const nextButton = () => {
setSelectedIndex(selectedIndex + 1);
setTransform({ ...{ color: 'red' } });
console.log(transform);
// rotateCarousel();
};
return (
<>
<div className="scene">
<div
ref={el => {
if (el) {
el.style.setProperty('color', transform.color, 'important');
}
}}
className="carousel"
>
<div className="carousel__cell">1</div>
{transform.color}
<div className="carousel__cell">2</div>
<div className="carousel__cell">3</div>
<div className="carousel__cell">4</div>
<div className="carousel__cell">5</div>
<div className="carousel__cell">6</div>
<div className="carousel__cell">7</div>
<div className="carousel__cell">8</div>
<div className="carousel__cell">9</div>
</div>
</div>
<button onClick={prevButton}>Previous</button>
<button onClick={nextButton}>Next</button>
{transform.color}
</>
);
};
export default Carousel;
I'm using material UI usePagination hook to create a custom pagination component, so far so good, the functionality works as expected but I was wondering how I can be able to reset the pagination to the first page by triggering a button that is not part of the pagination component.
Does anyone has an idea on how to trigger that?
This is my component.
import React from "react";
import PropTypes from "prop-types";
import { usePagination } from "hooks";
function arrow(type) {
return (
<i
className={`fa fa-chevron-${
type === "next" ? "right" : "left"
} page-icon`}
/>
);
}
function Pagination({ data, itemCount, onChange }) {
const { items } = usePagination({
count: Math.ceil(data.length / itemCount, 10),
onChange
});
return (
<nav aria-label="Paginator">
<ul className="pagination-component">
{items.map(({ page, type, selected, ...item }, index) => {
let children;
if (type === "start-ellipsis" || type === "end-ellipsis") {
children = "…";
} else if (type === "page") {
children = (
<button
type="button"
automation-tag={`page-${page}`}
className={`page-button ${selected ? "selected" : ""}`}
{...item}
>
{page}
</button>
);
} else {
children = (
<button
automation-tag={type}
className="page-button"
type="button"
{...item}
>
<span className="d-none">{type}</span>
{arrow(type)}
</button>
);
}
return (
// eslint-disable-next-line react/no-array-index-key
<li key={index} className="page-item">
{children}
</li>
);
})}
</ul>
</nav>
);
}
What I'm trying is to create a select component that the onChange function will sort the data, depending on the selection, but when the data is sorted I want to return the pagination component to the first page
const TableVizContainer = props => {
const [currentPage, setCurrentPage] = useState(1);
const [sortColumn, setSortColumn] = useState(1);
const [range, setRange] = useState({
start: 0,
end: 25
});
const onChangePage = (_event, page) => {
setCurrentPage(page);
setRange({
start: 25 * (page - 1),
end: 25 * page
});
};
const onSelectChange = event => {
const { value } = event.target;
setCurrentPage(1);
setSortColumn(parseInt(value, 10));
};
return (
<div
className="table-viz-container container-fluid my-4 float-left"
automation-tag={`table-viz-${automationId}`}
>
<div className="d-flex justify-content-between mb-3 leaderboard-meta">
<span className="leaderboard-title">{visualization.title}</span>
<div className="mr-5">
<label htmlFor="sort-table-select">
Sort By:
<select
id="sort-table-select"
onChange={onSelectChange}
value={sortColumn}
>
{visualization.columns.map((column, index) => {
const uniqueId = uuidv1();
return (
<option key={uniqueId} value={index}>
{setSelectValue(column, visualization.metrics)}
</option>
);
})}
</select>
</label>
</div>
</div>
<div className="d-block d-sm-flex justify-content-between align-items-center my-2 px-2">
<span className="page-items-count" automation-tag="pagination-count">
{`Showing ${range.start === 0 ? 1 : range.start + 1} - ${
range.end <= visualization.rows.length
? range.end
: visualization.rows.length
} of ${visualization.rows.length}.`}
</span>
<Pagination
currentPage={currentPage}
data={visualization.rows}
itemCount={25}
onChange={onChangePage}
/>
</div>
</div>
);
};
Does anyone has an idea on how to reset and move the pagination page to the first one without clicking the component?
There are two ways.
1. Passing Props
Let's just say you have a function called jump() and passing 1 as an argument will reset the pagination. So, you can pass the jump function as a property and reuse that on other components.
function jump(){
setCurrentPage(1)
}
<MyCompnent resetPage={jump} />
// MyComponent
function MyComponent({resetPage}){
return (
<button onClick={resetPage(1)}></button>
)
}
2. On Changing Route
You can reset your pagination when your route will change. For example, you are using a router npm package and that package has a method called onChange or routeChangeStart. With those methods or after creating that method you can implement a function like below.
Router.events.on("routeChangeStart", () => {
jump(1);
});