Develop Reference

Using window.innerWidth or document.documentElement.clientWidth to center align elements in a viewport

I've created a horizontal carousel element myself for use in a React application. I want the currently active card in the carousel to be centered in the center of the viewport so that this implementation works responsively for any device.
import React, { useState } from "react";
import styles from "./styles.module.scss";
const data = [
{
name: "1"
},
{
name: "2"
},
{
name: "3"
}
];
const Testimonial: React.FC = (): JSX.Element => {
const [activeIndex, setActiveIndex] = useState(0);
const determinePlacement = (): number => {
const width = 260;
const startingOffset =
(Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
) -
width) /
2;
if (activeIndex === 0) return startingOffset;
return -(activeIndex * width) + startingOffset;
};
const isActive = (i: number): null | string => {
return activeIndex === i ? styles.active : null;
};
return (
<>
<div className={styles.container}>
<div
className={styles["card-wrapper"]}
style={{ transform: `translateX(${determinePlacement()}px)` }}
>
{data.map((card, i) => {
return (
<div
onClick={(): void => setActiveIndex(i)}
className={styles.card}
key={i}
>
{`Card ${i + 1}`}
</div>
);
})}
</div>
</div>
<div className={styles["circles-wrapper"]}>
{data.map((_, i) => {
return (
<div
key={i}
onClick={(): void => setActiveIndex(i)}
className={[styles.circles, isActive(i)].join(" ")}
/>
);
})}
</div>
</>
);
};
export default Testimonial;
$cardWidth: 260px;
.circles-wrapper {
display: flex;
justify-content: center;
margin-top: 24px;
.circles {
width: 16px;
height: 16px;
border-radius: 16px;
background-color: hsla(207, 73%, 95%, 1);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
margin-right: 8px;
transition: all 0.5s ease;
&.active {
background-color: hsla(207, 73%, 57%, 1);
}
}
}
.container {
display: flex;
position: relative;
flex-direction: column;
margin-top: 32px;
margin-bottom: 32px;
.card-wrapper {
display: flex;
transition: all 1s ease;
.card {
display: flex;
flex-direction: column;
width: $cardWidth;
height: 100%;
background-color: hsla(207, 73%, 95%, 1);
border-radius: 20px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
padding: 32px;
margin: 0 10px;
}
}
}
I can't quite figure out why when I re-create this implementation, simplified in a code sandbox (you can view it here https://codesandbox.io/s/currying-wind-krgx7k?file=/src/app.tsx), the elements correctly center in the middle of the viewport but when I run this app locally in dev tools (f12) on mobile devices the spacing is wrong and the elements end up too far to the right?
I'm assuming this has something to do with a lack of understanding on my part about how document.documentElement.clientWidth and window.innerWidth work or something to do with viewport widths. Can anyone enlighten me here please?
Edit: turns out the codesandbox example I provided also doesn't work as expected and I'm imagining things.
So question is: how do you reliably center the active carousel card for any viewport?

For those interested, I figured out how to solve this and included a codesandbox below with a working solution.
https://codesandbox.io/s/zen-parm-e5yyn9?file=/src/App.js&resolutionWidth=1024&resolutionHeight=765
In the end, I decided trying to calculate the viewport width and the gap between the start of the viewport and the card was the wrong approach.
I used CSS flex to center a wrapper container for all cards (or boxes, in latest example) which would then be transformed on the x-axis. You need to remember to account for things like margin between elements.
The solution is far simpler, cleaner and works responsively now.

React: Moving component to different div on click

I'm very new to React so any advice would be appreciated on how to move an agent thumbnail to the teamComp div when it is clicked.
I'm also lost as to how to tackle filtering the data through a dropdown menu. Like how would I update the page without refreshing so that only the agents with the selected roles appear.
Anything would help, like I said before, I am a complete beginner to React and feel like I am underutilizing a lot of what makes React powerful.
App.js
import { useEffect, useMemo, useState } from "react";
import AgentCard from "./components/agentCard";
import Select from "react-select"
function App() {
const options = useMemo(
() => [
{value: "controller", label: "Controller"},
{value: "duelist", label: "Duelist"},
{value: "initiator", label: "Initiator"},
{value: "sentinel", label: "Sentinel"},
],
[]
);
const [agentDetails, setAgentDetails] = useState([]);
const getAllAgents = async () => {
const res = await fetch("https://valorant-api.com/v1/agents/");
const results = await res.json();
const agentNames = [],
agentImages = [],
agentRoles = [],
agentDetails = [];
for (let i = 0; i < Object.keys(results["data"]).length; i++) {
if (results["data"][i]["developerName"] != "Hunter_NPE") {
agentNames.push(results["data"][i]["displayName"]);
agentImages.push(results["data"][i]["displayIcon"]);
agentRoles.push(results["data"][i]["role"]["displayName"]);
}
else {
continue;
}
}
for (let i = 0; i < agentNames.length; i++) {
agentDetails[i] = [agentNames[i], [agentImages[i], agentRoles[i]]];
}
agentDetails.sort();
setAgentDetails(agentDetails);
};
useEffect(() => {
getAllAgents();
}, []);
return (
<div className="app-container">
<h2>Valorant Team Builder</h2>
<div className="teamComp">
</div>
<Select options={options} defaultValue={options} isMulti/>
<div id="agent_container" className="agent-container">
{agentDetails.map((agentDetails) => (
<AgentCard
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
/>
))}
</div>
</div>
);
}
export default App;
agentCard.js
import React from 'react'
const agentCard = ({role, name, img}) => {
return (
<div className="card-container">
<div className="img-container">
<img src={img} alt={name} />
</div>
<div className="info">
<h3 className="name">{name}</h3>
<small className="role"><span>Role: {role}</span></small>
</div>
</div>
)
}
export default agentCard
index.css
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
#import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');
* {
box-sizing: border-box;
}
body {
background: #EFEFBB;
background: -webkit-linear-gradient(to right, #D4D3DD, #EFEFBB);
background: linear-gradient(to right, #D4D3DD, #EFEFBB);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Lato';
margin: 0;
}
h1 {
letter-spacing: 3px;
}
.agent-container {
display: flex;
flex-wrap: wrap;
align-items: space-between;
justify-content: center;
margin: 0 auto;
max-width: 1200px;
}
.app-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 3rem 0.5rem;
}
.card-container {
background-color: #eee;
border-radius: 20px;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
margin: 10px;
padding: 20px;
text-align: center;
}
.card-container:hover {
filter: brightness(70%);
transition: all 150ms ease;
}
.img-container img {
margin-top: 1.5rem;
height: 128px;
width: 128px;
}
.name {
margin-bottom: 0.2rem;
}
.teamComp h3 {
float: left;
}

Moving cards
To move a card to a different list you need a new state array that will represent "the members of the team". Something like:
const [team, setTeam] = useState([]);
Render the items in team inside the "teamComp" <div>, the same way you do it in the agent container.
Then add the new function prop to the card and use it in the onClick handler in the card <div>:
<AgentCard
key={agentDetails[0]}
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
handleClick={moveToTeam}
/>
...
<div className="card-container" onClick={() => handleClick(name)}>
and in this function, add the agentDetails item to the team state and remove it from the agentDetails state. Make sure that you supply new arrays when setting state:
const moveToTeam = (name) => {
const newTeam = [...team, agentDetails.find((agent) => agent[0] === name)];
const newAgentDetails = agentDetails.filter((agent) => agent[0] !== name);
setTeam(newTeam);
setAgentDetails(newAgentDetails);
};
Filtering
For filtering you need another state that contains all selected options:
const [options, setOptions] = useState(allOptions);
where allOptions is an array of all available options, and it should not change.
Add the onChange handler to the <Select> component:
<Select
options={allOptions}
onChange={(selectedOptions) => setOptions(selectedOptions)}
defaultValue={allOptions}
isMulti
/>
and finally use options to filter cards:
<div id="agent_container" className="agent-container">
{agentDetails
.filter(
(agentDetails) =>
options.filter((option) => option.label === agentDetails[1][1])
.length > 0
)
.map((agentDetails) => (
<AgentCard
key={agentDetails[0]}
img={agentDetails[1][0]}
name={agentDetails[0]}
role={agentDetails[1][1]}
handleClick={moveToTeam}
/>
))}
</div>
You can see the complete example on codesandbox.
I left most of the names in place, although I think using agentDetails for different things is confusing. The data structures can also be improved, but I left them unchanged as well.

How to achieve a clickable icon using an OnClick event in React that holds a setTimeout but also a clearTimeout?

THE PHOTO BELOW SHOWS WHAT I WANT TO ACHIEVE. Basically I have a component where when I hover some arrows (up and down) appears but when the user click those arrows the background color changes, but just on the click itself. and the background color does not remain clicked. I tried to achieve that with a setTimeout on the click event. I can let the timer work on the click but the clearTimeout is not working. Any clues? the code is also below (after the photo).
THIS IS MY CODE:
//rafce
import React, { useState } from 'react';
// styled components
import styled from 'styled-components';
// icons
import { IoIosArrowUp, IoIosArrowDown } from 'react-icons/io';
const DurationIntervalComponent = () => {
const [hours, setHours] = useState('0');
const [showHoursArrows, setShowHourArrows] = useState(false);
const [arrowActiveUp, setArrowActiveUp] = useState(false);
const [arrowActiveDown, setArrowActiveDown] = useState(false);
const incrementHours = (value) => {
let timer = setTimeout(() => setArrowActiveUp(true), 500);
clearTimeout(timer, 1000)
setHours((prevHours) => {
// if there is nothing
if (!prevHours) {
return '0';
} else if (+prevHours >= 24) {
return '0';
} else {
return String(+prevHours + 1);
}
});
};
const decrementHours = (value) => {
setArrowActiveDown(true);
setHours((prevHours) => {
// if there is nothing
if (!prevHours) {
return '0';
} else if (+prevHours <= 0) {
return '24';
} else {
return String(+prevHours - 1);
}
});
};
return (
<Container>
<Row>
<p> Interval* </p>
<Inputs>
<Selection
onMouseEnter={() => setShowHourArrows(true)}
onMouseLeave={() => setShowHourArrows(false)}
>
{showHoursArrows && (
<p
className="icon"
onClick={incrementHours}
style={
arrowActiveUp
? { backgroundColor: 'red' }
: { backgroundColor: 'none' }
}
>
<IoIosArrowUp />
</p>
)}
<SquareInput value={hours} />
<p>hours</p>
{showHoursArrows && (
<p className="icon" onClick={decrementHours}>
<IoIosArrowDown />
</p>
)}
</Selection>
<div>
<SquareInput />
<p>minutes</p>
</div>
</Inputs>
</Row>
<hr />
<Row>
<p> Duration* </p>
<Inputs>
<SquareInput />
<p>:</p>
<SquareInput />
<p>to</p>
<SquareInput />
<p>:</p>
<SquareInput />
</Inputs>
</Row>
</Container>
);
};
const Container = styled.div`
border: 1px solid #c5c5c5;
border-radius: 15px;
`;
const Row = styled.div`
display: flex;
align-items: center;
height: 150px;
justify-content: space-between;
padding: 20px;
`;
const Inputs = styled.div`
display: flex;
align-items: center;
p {
margin-right: 5px;
font-size: 0.8em;
text-align: center;
}
`;
const Selection = styled.div`
.icon {
font-size: 1.2em;
padding: 0;
}
`;
const SquareInput = styled.input`
width: 50px;
height: 50px;
border: 1px solid #c5c5c5;
border-radius: 10px;
outline: none;
margin-right: 5px;
font-size: 1.5em;
text-align: center;
`;
export default DurationIntervalComponent;

My component re-render after i try to search for an element in a useState array

I am currently building a React project, so I made a search Input and when I type something in that Input field my hole component re-renders causing an API recall and deleting the text in my Input. I tried merging both the search component with Home component and the same problem appears.
I want my component to call the api only one time, and I am trying to filter the response depending on the input type.
please help!!
Here is my Home component:
import { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import CountryThumb from '../Components/CountryThumb';
import ThemeContext from '../Components/ColorPalette';
import { Themes } from '../Components/ColorPalette';
import Search from '../Components/Search';
import Filter from '../Components/Filter';
const Grid = styled.main`
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 60px;
row-gap: 40px;
#media (max-width: 375px) {
grid-template-columns: repeat(1, 1fr);
}
`;
export default function Home() {
const [Countries, setCountries] = useState([]);
const [SearchTerms, setSearchTerms] = useState('');
const { Theme } = useContext(ThemeContext);
const style = Theme == 'light' ? Themes.light : Themes.dark;
useEffect(() => {
getCountries();
}, []);
const Main = styled.main`
display: flex;
flex-wrap: wrap;
padding: 20px 100px;
background-color: ${Theme == 'light' ? style.background : style.background};
#media (max-width: 375px) {
padding: 40px 25px;
}
`;
const getCountries = () => {
axios
.get('https://restcountries.eu/rest/v2/all')
.then((res) => setCountries(res.data))
.catch((err) => console.log(err));
};
return (
<>
<Main>
<Search handleSearch={(e) => setSearchTerms(e.target.value)} />
<Filter />
<Grid>
{Countries.slice(0, 12)
.filter((e) => {
if (SearchTerms == '') {
return e;
} else if (
e.name.toLowerCase().includes(SearchTerms.toLowerCase())
) {
return e;
}
})
.map((e) => (
<CountryThumb props={e} />
))}
</Grid>
</Main>
</>
);
}
And here is my Search component:
import { useContext, useState } from 'react';
import styled from 'styled-components';
import ThemeContext, { Themes } from './ColorPalette';
function Search({ handleSearch }) {
const { Theme } = useContext(ThemeContext);
const style = Theme == 'light' ? Themes.light : Themes.dark;
const Svg = styled.svg`
width: 24px;
height: 24px;
color: ${style.text};
`;
const Wrapper = styled.div`
background-color: ${style.element};
border-radius: 5px;
box-shadow: 0 5px 10px ${style.shadow};
display: flex;
align-items: center;
padding: 0 20px;
margin: 40px 0;
`;
const CInput = styled.input`
border: none;
outline: none;
padding: 15px 120px 15px 20px;
font-size: 1rem;
color: ${style.text};
background: none;
`;
return (
<>
<Wrapper>
<Svg
xmlns='http://www.w3.org/2000/svg'
class='h-6 w-6'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth='2'
d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
/>
</Svg>
<CInput
type='text'
name='Search'
onInput={handleSearch}
placeholder='Search for a country ...'
/>
</Wrapper>
</>
);
}
export default Search;

Whenever you change anything in state your component will rerender so it is normal behaviour. However you have dependency array in useEffect that calls api so this function should run only one time, maybe you didnt have array before and forgot to save.

ReactJS - pass object keys and values as props to div

In my Class component Field.jsx render(), I'm expanding my <Position> component using <Flipper>, (an abstracted flip animation), like so:
import { Flipper, Flipped } from 'react-flip-toolkit'
import { Position } from "./Position";
import "./css/Position.css";
class Field extends Component {
constructor(props) {
super(props);
this.state = {
fullScreen: false,
};
}
toggleFullScreen() {
this.setState({ fullScreen: !this.state.fullScreen });
}
...
render() {
const { players } = this.props;
const { fullScreen } = this.state;
if(players){
return (
<div className="back">
<div className="field-wrapper" >
<Output output={this.props.strategy} />
<Flipper flipKey={fullScreen}>
<Flipped flipId="player">
<div className="field-row">
{this.getPlayersByPosition(players, 5).map((player,i) => (
<Position
key={i}
className={fullScreen ? "full-screen-player" : "player"}
getPositionData={this.getPositionData}
toggleFullScreen={this.toggleFullScreen.bind(this)}
>{player.name}</Position>
))}
</div>
</Flipped>
</Flipper>
</div>
</div>
);
}else{
return null}
}
When I render it, I get clickable items from the mapped function getPlayersByPosition(), like so:
And if I click on each item, it expands to a div with player name:
Which is passed as props.children at component <div>
Position.jsx
import React from "react";
import "./css/Position.css";
export const Position = props => (
<div
className={props.className}
onClick={() => {
props.getPositionData(props.children);
props.toggleFullScreen();
console.log(props.getPositionData(props.children))
}}
>
{props.children}
</div>
);
getPositionData(), however, returns an object with many items on its turn, as seen by console above:
{matches: 7, mean: 6.15, price: 9.46, value: 0.67, G: 3, …}
QUESTION:
How do I pass and print theses other props keys and values on the expanded purple div as text?, so as to end with:
Patrick de Paula
matches: 7
mean: 6.15
price:9.46
....
NOTE:
Position.css
.position-wrapper {
height: 4em;
display: flex;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
color: #888888;
flex: 1;
/*outline: 1px solid #888888;*/
}
.player {
height: 4em;
width: 4em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-weight: lighter;
font-size: 1.4em;
/*background-color: #66CD00;*/
color: #ffffff;
}
.full-screen-player {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
background-image: linear-gradient(
45deg,
rgb(121, 113, 234),
rgb(97, 71, 182)
);
}

Looks like the props are all set & ready to be print as seen on your console. You can access them via props.getPositionData(props.children).property_name_here or destructure them
export const Position = props => {
const { matches, mean, price } = props.getPositionData(props.children);
return (
<div
className={props.className}
onClick={() => {
props.getPositionData(props.children);
props.toggleFullScreen();
console.log(props.getPositionData(props.children))
}}
>
<p>Name: {props.children}</p>
<p>Matches: {matches}</p>
<p>Mean: {mean}</p>
<p>Price: {price}</p>
</div>
)
}
Regarding the issue on the fullScreen prop (see comments section):
Is there a way to print them ONLY after toggleFullScreen()
Since you already have a state on the Field component which holds your fullScreen value, on your Field component, you need to pass the fullScreen prop as well to the Position component. e.g., fullScreen={this.state.fullScreen}. Back on Position component, have some condition statements when you are rendering.
Example:
<>
{props.fullScreen &&
<p>Name: {props.children}</p>
}
</>