We Keep Coding

Move react component to another component

I'm working on a react. The code below is an example. ArrayExample is mapped and returned to the div component. Whenever I click the mapped div component, I want to change the value of the top of div (position: 'absolute') and place it on the right side according to the mapped div topBorder. Is there a way? I want to move it smoothly like an animation.
import React from "react";
const sample = () => {
const arrayExample = ["AAAA", "BBBB", "CCCC"];
return (
<div
style={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "500px",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f3f3f3",
}}
>
{arrayExample.map((v, i) => {
return (
<div
style={{
width: "50%",
padding: 50,
border: "1px solid black",
marginTop: 15,
}}
onClick={() => {
console.log("Event!")
}}
>
{v}
</div>
);
})}
<div style={{position: 'absolute', top: 70, right: '22%', backgroundColor: "#4285F4", width: 50, height: 150, borderRadius: 5}}>
moving screen(I want to Change top value)
</div>
</div>
);
};
export default sample;

On click of the item div, you need to figure out the distance of that div from the top, and then change the top css property of your right div according to that. To find this distance you can use offsetTop property. For animation you can use transition property. Here is the code:
import React, { useRef } from "react";
const Sample = () => {
const arrayExample = ["AAAA", "BBBB", "CCCC"];
const rightDiv = useRef();
const itemClickHandler = (i) => {
const newTopHeight = document.getElementById("container").children[i].offsetTop;
rightDiv.current.style.top = newTopHeight + 'px';
}
return (
<div
id="container"
style={{
display: "flex",
flexDirection: "column",
width: "100%",
height: "500px",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#f3f3f3",
}}
>
{arrayExample.map((v, i) => {
return (
<div
key={i}
style={{
width: "50%",
padding: 50,
border: "1px solid black",
marginTop: 15,
}}
onClick={() => itemClickHandler(i)}
>
{v}
</div>
);
})}
<div
ref={rightDiv}
style={{
position: 'absolute',
top: 70,
right: '22%',
backgroundColor: "#4285F4",
width: 50,
height: 150,
borderRadius: 5,
transition: "top 0.5s ease-in-out"
}}>
moving screen(I want to Change top value)
</div>
</div>
);
};
export default Sample;
You can see this in action here: https://codesandbox.io/s/thirsty-curie-7mskj

In your click handler you can get the current position of the clicked div in px, you can easily google how to do this this (relative to the page, not the viewport). I would suggest storing this value in state, call it something like activeItemOffsetTop, then just set top to the current state

How to position a child div to span from the beginning to the end of a parent div?

I'm trying to position the FullWidthDiv component to span from the beginning of the MainDiv side, all the way to the end. I've tried giving in an absolute position and playing around with flex, but I can't get it to not start from the SubDiv component.
Is it possible to achieve this?
My CodeSandbox approach.
Here is what I'm trying to achieve

It is a little bit hacky, but you can center ChildDiv with align-items: center.
Also, shrink the FullWidthDiv to 280.
And last you have to add flex: 1, width: 100% to the div, that hold SubChildDiv inside App component.
export default function App() {
return (
<MainDiv>
<ChildDiv>
<div style={{flex: 1, width: '100%'}}>
<SubChildDiv />
<SubChildDiv />
</div>
<FullWidthDiv />
</ChildDiv>
</MainDiv>
);
}
const MainDiv = ({ children }) => (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: 250,
height: 250,
backgroundColor: "red",
padding: "1rem"
}}
>
{children}
</div>
);
const ChildDiv = ({ children }) => (
<div
style={{
width: 200,
height: 200,
backgroundColor: "blue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between"
}}
>
{children}
</div>
);
const SubChildDiv = () => (
<div
style={{
display: "flex",
width: "100%",
height: 30,
backgroundColor: "green",
border: "1px solid black"
}}
/>
);
const FullWidthDiv = () => (
<div
style={{
width: 280,
height: 30,
border: "1px solid black",
backgroundColor: "green"
}}
/>
);
If you want the FullWidthDiv to be with 100% width, you have to calculate the 100% width and add the padding from both sides of MainDiv it will look something like that: calc(100% + 2rem).

Why div is outside of parent div? Using React

I have a div specified like this:
<button
style={{
padding: "0px",
background: "yellow",
position: "absolute",
left: `${seat.x}%`,
top: `${seat.y}%`,
width: `${squareSizePercentageX}%`,
paddingTop: `${squareSizePercentageX}%`
}}
key={index}
/>
seat.x and seat.y is always under 100. In spite of that div get outside of parent div.
This is how parent looks like:
<div
style={{
display: "flex",
maxWidth: `calc(calc(100vmin * ${aspectRatio})+200px)`
}}
>
<div style={{ width: `calc(100vmin * ${aspectRatio})` }}>
<div
style={{ paddingTop: `${100 / aspectRatio}%`, background: "pink" }} // <-- this is here the parent
>{listContent2}</div>
</div>
<div style={{ width: "200px", background: "yellow" }}>
</div>
</div>
Here all the code:
import React from "react";
import UPUjpestRendezvenyterLayout from "../assets/UPUjpestRendezvenyterLayout.json";
class SelectSeat extends React.Component {
render() {
const seats = UPUjpestRendezvenyterLayout.seats;
const squareSizePercentageX =
UPUjpestRendezvenyterLayout.squareSizePercentageX;
const aspectRatio = UPUjpestRendezvenyterLayout.aspectRatio;
let listContent2 = seats.map((seat, index) => {
return (
<button
style={{
padding: "0px",
background: "yellow",
position: "absolute",
left: `${seat.x}%`,
top: `${seat.y}%`,
width: `${squareSizePercentageX}%`,
paddingTop: `${squareSizePercentageX}%`
}}
key={index}
/>
);
});
return (
<div
style={{
display: "flex",
maxWidth: `calc(calc(100vmin * ${aspectRatio})+200px)`
}}
>
<div style={{ width: `calc(100vmin * ${aspectRatio})` }}>
<div
style={{ paddingTop: `${100 / aspectRatio}%`, background: "pink" }} // <-- this is here the parent
>{listContent2}</div>
</div>
<div style={{ width: "200px", background: "yellow" }}>
</div>
</div>
);
}
}
export default SelectSeat;
Here an image. Small yellow rectangle should be all inside pink area.

you need to set position: relative to parent div

try by giving Css flex-wrap: wrap; and position : relative and don't forget to set left and top to your parent div , these changes can fix your problem

Give each Popper its own css style

I have a componet that creates 6 experiences each one with its own popper. I want to edit the popper's so that each popper has its each style (background and possition) and I want them all to have the same size image.
I have tried edditing the paper style and adding a className with the id of each experience as the className property but cannot get any styles I apply to work.
This is my experience compoenent.
import React, { memo, useCallback } from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '#material-ui/styles';
import Grid from '#material-ui/core/Grid';
import Typography from '#material-ui/core/Typography';
import clsx from 'clsx';
import Popper from '#material-ui/core/Popper';
import gastronomia from 'assets/experiences/gastronomia.jpg';
import productos from 'assets/experiences/productos.jpg';
import giftcard from 'assets/experiences/giftcard.jpg';
import diversion from 'assets/experiences/diversion.jpg';
import deporte from 'assets/experiences/deporte.jpg';
import belleza from 'assets/experiences/belleza.jpg';
import gastronomiaExperiences from 'data/gastronomia';
import productosExperiences from 'data/productos';
import giftcardExperiences from 'data/giftcard';
import diversionExperiences from 'data/diversion';
import deporteExperiences from 'data/deporte';
import bellezaExperiences from 'data/belleza';
// Proptypes definitions to the component.
const propTypes = {
/** Custom root className. */
className: PropTypes.string,
};
// Default props definitions.
const defaultProps = {
className: null,
};
// Component's styles
const useStyles = makeStyles(theme => ({
root: {
display: 'block',
margin: '0 auto',
maxWidth: '50%',
[theme.breakpoints.down('md')]: {
maxWidth: '70%',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
},
'& .experiences-column': {
display: 'inline-block',
verticalAlign: 'top',
textAlign: 'center',
'&.col1': {
width: '36.31%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'&.col2': {
width: '63.69%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'& .experience': {
padding: 2,
position: 'relative',
'& img': {
width: '100%',
display: 'block',
},
'& .experience-title': {
position: 'absolute',
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
},
'& .deporte': {
backgroundColor: '#000',
'& img': {
width: '30px',
display: 'block',
},
},
},
paper: {
border: '1px solid',
padding: theme.spacing(1)
},
},
},
}), { name: 'ExperiencesStyle' });
/**
* Component used to render a grid of experiences.
*
* #param {object} props - The component's props.
* #returns {object} React element.
*/
const Experiences = memo(
(props) => {
const { className } = props;
const classes = useStyles(props);
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const open = Boolean(anchorEl);
const experience = (img, title, id, popoverCategory) => (
<div
className="experience"
aria-describedby={id}
id={id}
onClick={handleClick}
>
<img
data-sizes="auto"
className="lazyload"
data-src={img}
alt={title}
/>
<div className="experience-title">
<Typography
color="textSecondary"
variant="subtitle2"
className="highlight highlight1"
display="inline"
>
{ title }
</Typography>
</div>
<Popper
id={id}
open={anchorEl && anchorEl.id === id || false}
anchorEl={anchorEl}
className={id}
>
<div className={[classes.paper, id]}>
{
popoverCategory.map(url => (
<Grid
sm={4}
>
<img
key={id}
data-sizes="auto"
className="lazyload"
src={url}
alt={ title }
/>
</Grid>
))
}
</div>
</Popper>
</div>
);
console.log();
return (
<div className={clsx(classes.root, className)}>
<div className="experiences-column col1">
{experience(gastronomia, 'GASTRONOMÍA', 'gastronomia', gastronomiaExperiences)}
{experience(giftcard, 'GIFT CARD', 'giftcard', giftcardExperiences)}
{experience(deporte, 'DEPORTE', 'deporte', deporteExperiences)}
</div>
<div className="experiences-column col2">
{experience(productos, 'PRODUCTOS', 'productos', productosExperiences)}
{experience(diversion, 'DIVERSIÓN', 'diversion', diversionExperiences)}
{experience(belleza, 'BELLEZA', 'belleza', bellezaExperiences)}
</div>
</div>
);
},
);
// Component proptypes.
Experiences.propTypes = propTypes;
// Component default props.
Experiences.defaultProps = defaultProps;
export default Experiences;
I am new to meterial ui and relatively new to react so I am a bit lost on how to get the styles to work.

The following code only applies when there is the deporte class is inside a paper class.
paper: {
border: '1px solid',
padding: theme.spacing(1)},
'& .deporte': {
backgroundColor: '#000',
'& img': {
width: '30px',
display: 'block',
},
},
You can take it out of the paper component in the style and put it in the root.
const useStyles = makeStyles(theme => ({
root: {
display: 'block',
margin: '0 auto',
maxWidth: '50%',
[theme.breakpoints.down('md')]: {
maxWidth: '70%',
},
[theme.breakpoints.down('sm')]: {
maxWidth: '100%',
},
'& .experiences-column': {
display: 'inline-block',
verticalAlign: 'top',
textAlign: 'center',
'&.col1': {
width: '36.31%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'&.col2': {
width: '63.69%',
[theme.breakpoints.down('sm')]: {
width: 'initial',
},
},
'& .experience': {
padding: 2,
position: 'relative',
'& img': {
width: '100%',
display: 'block',
},
'& .experience-title': {
position: 'absolute',
bottom: 30,
left: 0,
right: 0,
textAlign: 'center',
},
},
},
},
deporte: {
backgroundColor: '#000',
'& img': {
width: '30px',
display: 'block',
},
},
paper: {
border: '1px solid',
padding: theme.spacing(1),
},
}), { name: 'ExperiencesStyle' });
Also replace this:
<Popper
id={id}
open={anchorEl && anchorEl.id === id || false}
anchorEl={anchorEl}
className={id}
>
<div className={classes.paper}>
{
popoverCategory.map(url => (
<Grid
sm={4}
>
<img
key={id}
data-sizes="auto"
className="lazyload"
src={url}
alt={ title }
/>
</Grid>
))
}
</div>
</Popper>
with this:
<Popper
id={id}
open={anchorEl && anchorEl.id === id || false}
anchorEl={anchorEl}
className={id}
>
<div className={clsx(classes.paper, classes[id])}>
{
popoverCategory.map(url => (
<Grid
sm={4}
>
<img
key={id}
data-sizes="auto"
className="lazyload"
src={url}
alt={ title }
/>
</Grid>
))
}
</div>
</Popper>

Why particles.js height not expanding?

I want to use particles.js for my project background. I'm having an issue with height. It's not expanding height in device web. Actually height property is not working. Please help me with this.
Here is the code:
https://codesandbox.io/s/4zv0329nn0
particle.js component.
import React from "react";
import Particles from "react-particles-js";
export default () => (
<div
style={{
width: "100%",
height: "100%",
backgroundColor: "blue"
}}
>
<Particles
params={{
particles: {
number: {
value: 50
},
size: {
value: 3
}
},
interactivity: {
events: {
onhover: {
enable: true,
mode: "repulse"
}
}
}
}}
/>
</div>
);
App component.
const App = () => {
return (
<div
style={{
width: "100%",
height: "100%",
margin: "0",
padding: "0"
}}
>
<ParticleComponent />
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
>
<h1>test</h1>
</div>
</div>
);
}

Add height={window.outerHeight} prop to ParticleComponent.
Solution here 👇