I´m rendering an array, every element of the array is showed with component "Post", but the elements are in the same line, I tried with
return (
<div style={{ height: 'calc(100vh - 65px)' }} className="d-flex justify-content-center align-items-center">
{posts.map((post) => {
return <Post key={post._id} post={post} />
})}
</div>
);
The component "Post" is the next:
I´m using Boostrap por the css styles
return (
{usuario.nombre}
Special title treatment
{texto}
Go somewhere
2 days ago
);
My result (All the elements are in horizontal position and I need them in vertical position):
The father component is root.
If I delete the css classes of the component "Post", teh problem remains.
Have you tried this.
return (
<div>
{posts.map((post) => {
return <><Post key={post._id} post={post} /><br /></>
})}
</div>
);
I only changed the class of div where I put the .map ;| adn the problem was solved.
className="container" instead className="d-flex justify-content-center align-items-center">
Related
I'm using react-on-screen and Animate.css to create slideInUp animation on scroll. But I want to the animation to show up when the page is loaded and the scroll-down happened. Now in my code, the animation happens every time I scroll up and down. How do I prevent that? Additional to that, if there is any way to do it without using Animate.css or react-on-screen I would love to learn it.
Here is the code that I track scrolling and Animate.css:
<>
<div className={`container mb-5 `}>
<h1 className='text-center my-5 blue-text'>SOME HEADER</h1>
<TrackVisibility partialVisibility>
{({ isVisible }) =>
<div className={`row animated-row my-element ${isVisible ? "animate__animated animate__slideInUp animate__repeat-1 my-element" :""}`} >
<Card />
<Card />
<Card />
<Card />
</div>
}
</TrackVisibility>
</div>
</>
I saw the "Usage with Javascript" codes on the Animate.css main page but I couldn't apply them to my React code.
Thanks.
Disregard the mess, this is my first project using Reactjs.
I created some cards displaying images of Star Wars characters and when hovered they'll flip and display information about said character.
Unfortunately, whenever I hover one, the card adjacent to it will also rotate.
I know the issue is I have the onMouseEnter essentially applying to all at once however, I'm unsure on how to fix or adjust this problem.
return (
<CardContainer>
{loading && <h1 className="loading">LOADING...</h1>}
{characters.map((character, result) => {
return (
<Card id={result}
onMouseEnter={() => setFlip(true)}
onMouseLeave={() => setFlip(false)}
>
<CardFront flip={flip}>
<CardContent>
<CardImage img={characterToProfileImage[character.name]} />
</CardContent>
<BGFade />
</CardFront>
<CardBack flip={flip}>
<CardContent>
<h1 className="info-name">{character.name} </h1>
<h2 className="info-text">Height: {character.height}cm </h2>
<h2 className="info-text">Weight: {character.mass}kg </h2>
<h2 className="info-text">Gender: {character.gender} </h2>
<h2 className="info-text">Eye color: {character.eye_color} </h2>
<h2 className="info-text">
Birth year: {character.birth_year}
</h2>
</CardContent>
</CardBack>
</Card>
);
})}
</CardContainer>
You can check the code here: https://codesandbox.io/s/billowing-leaf-1mqdud?file=/
and the file in question is components/Characters.js
Since React 18 I have some errors when rendering the application and can't nest any elements as it seems.
For example, I have the following code in my application:
return (
<Card>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</Card>
);
This code worked fine up to React 18, now from 18 version I get the following error:
Likewise, element arrays can no longer be rendered, again, the following code worked fine in React17:
<DataTable metaKeySelection={false} selectionMode={"single"} onSelectionChange={e => {
setSelection(e.value)
}} selection={selection} stripedRows={true} showGridlines={true} size={"small"}
value={artifacts}>
{colModels}
</DataTable>
And now since React18 the following problem occurs:
It seems to me that with v18 React expects React Nodes everywhere and JSX as such is no longer accepted.
These errors disappear as soon as I enclose said elements with a React fragment, is this really the only way to solve this problem?
Thanks in advance!
Yes React 18 did make some changes I am not sure about your second issue but your first issue with card can be fixed like this...
Just add <> and </> React Fragment as the singlular child.
<Card>
<>
<div className={`flex flex-row justify-content-center align-items-center`}>
{props.icon}
<h2>{props.text}</h2>
</div>
<div className={"flex justify-content-center align-items-center"}>
<Button onClick={() => props.onButtonClick()} className={"w-2"} label={props.buttonText}/>
</div>
</>
</Card>
video of issue:
When the carousel is transitioning from one slide to another, if another entry from a dataset is choosen, before the slide finishes its transition, the new images are rendered, but controls/timer are broken, so the carousel is not slidable any more (manually or automatically).
activeFish is a useState object with some fish data that gets changed with setActiveFish(newActiveFishDataObject) when a list item is clicked
Anyone have ideas for a solution?
<Carousel>
{activeFish['Image Gallery'].map((imageData, i) => (
<Carousel.Item key={imageData.title + i}>
<div className="image-container">
<img
className="d-block w-100"
src={imageData.src}
alt={imageData.alt}
/>
</div>
<Carousel.Caption>
<p>{imageData.title}</p>
</Carousel.Caption>
</Carousel.Item>
))}
</Carousel>
Replicate-
https://codesandbox.io/s/frosty-night-yckxro (thanks to #IgorGonak)
onload, immediately click the down arrow on the dropdown to expose options, mouse over option b, wait for transition to happen, click b rite in the middle of the transition. observe controls wont work for the 'b' dataset
I've created a dummy data with three entries and three images each entry. Then I built a select to select one and the carousel like yours - it is working on my side: When I choose another entry, the images in carousel are adjusted. The transition is working and is performed after each defined timeout:
https://codesandbox.io/s/frosty-night-yckxro
import React from "react";
import { Carousel, Form, Stack } from "react-bootstrap";
import data from "./fishData";
export default function App() {
const [activeFish, setActiveFish] = React.useState(data[0]);
const onSelect = (event) => {
const choosenFishName = event.target.value;
const choosenFish = data.find((fish) => fish.name === choosenFishName);
setActiveFish(choosenFish);
};
return (
<Stack className="m-3">
<Form.Group id="fish-select" className="mb-3" style={{ width: "18rem" }}>
<Form.Select value={activeFish.name} onChange={onSelect}>
{data.map((entry) => (
<option key={entry.name} value={entry.name}>
{entry.name}
</option>
))}
</Form.Select>
</Form.Group>
<p>Choosen fish is: {activeFish.name}</p>
<Carousel style={{ height: 200, width: 300 }}>
{activeFish["Image Gallery"].map((img) => {
return (
<Carousel.Item key={img.title}>
<img className="d-block w-100" src={img.src} alt={img.alt} />
<Carousel.Caption>{img.title}</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
</Stack>
);
}
Edit:
According to https://github.com/react-bootstrap/react-bootstrap/issues/6352 the problem here is that there is a state called "isSliding" in Carousel component. If it's true, the controls are deactivated. When we change children while sliding "isSliding" is true, but it's not set to false in the end, because the appropriate callback is never fired.
The solution is to reset the component by adding unique key to it:
<Carousel
key={activeFish.name}
interval={2000}
style={{ height: 200, width: 300 }}
>
{activeFish["Image Gallery"].map((img) => {
return (
<Carousel.Item key={img.title}>
<img className="d-block w-100" src={img.src} alt={img.alt} />
<Carousel.Caption>{img.title}</Carousel.Caption>
</Carousel.Item>
);
})}
</Carousel>
I have built a website fully with the swiperJs in react.js web app and when i am using it on the mobile i need to slice the slides in 3 parts and slide them vertically and the collection of images should be in the horizontal stacked slides, and i need to update the url when i am on the sliced slides each has the different url and should redirect to the exact slides in the page, i am passing the images through the data.jsx file.
return (
<>
{item.map(
({ id, title, description, collection_images }, idx) => (
<div key={`${idx}`}>
<TitleSlide
title={t(title)}
description={t(description)}
/>
<Swiper {...swiperProps} spaceBetween={0} ref={swiperRef}>
{collection_images.length > 0 &&
collection_images.map(({ id, url, alt }, idx) => (
<SwiperSlide key={`${id}`}>
<figure>
<img
src={url}
alt={alt}
className="img-fluid"
/>
</figure>
</SwiperSlide>
))}
</Swiper>
</div>
),
)}
</>
);