I was wondering is it possible to show couple images on single preview of ANTD carousel.
For insrance i have a carousel on which i may have different amount of immages.
The problem is that i want to show all avaliable images in preview without heving to schroll through them.
I tried to change size of immages but that didn't help.
Also i haven't found any properties in ANTD for that.
Does anyone know is it possible?
import { Carousel } from 'antd';
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
ReactDOM.render(
<Carousel effect="fade">
<div>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>,
mountNode,
);
Here's what seemed to work.
Mainly just added an extra item to my array in 0th position and conditionally rendered a preview frame which included all the images in a grid.
Sample:
const images = [...new Array(5).keys()].map((rowIndex, _, array) => {
if (rowIndex === 0) {
return (
<React.Fragment>
<div key={rowIndex} style={previewStyle}>
{array.map((colIndex) => (
<h3 key={(rowIndex + 1) * (colIndex + 1)} style={h3Style}>
Preview: {colIndex}
</h3>
))}
</div>
</React.Fragment>
);
}
return (
<React.Fragment>
<h3 key={rowIndex} style={{...h3Style, lineHeight: '160px',}}>
{rowIndex}
</h3>
</React.Fragment>
);
});
Related
I need some help with flexbox. I'm not able to evenly distribute all components in a row with 'justify-content' - the components only stay in a column. It seems that React does not consider the 2 components that were generated from props - it treats all as just one component.
App.js
const App=()=> {
return(
<>
<Header />
<div className="containerHeader">
<h1>RECEIVE THE BEST DENTAL TREATMENT TO AVOID CROOKED-TEETH PROBLEM</h1>
<h2>We will give you the accurate assessment to find out which braces best suit you.</h2>
</div>
{Data.map((values)=>{
return(
<>
<Meeting
key={values.id}
imgsrc={values.imgsrc}
text={values.text}
/>
</>
)
})}
</>
);
};
Meeting.js
const Meeting=(props)=> {
return(
<div className="containerMeeting">
<div className="containerCard">
<img src={props.imgsrc} alt="Girl" />
<p>{props.text}</p>
</div>
</div>
);
};
Meeting.css
.containerMeeting {
padding: 0px 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
MeetingData.js
const Data=[
{
id:1,
imgsrc:"../Images/1.jpg ",
text:"Well-aligned teeth and fresher breath always leave a good impression when meeting a person for the first time."
},
{
id:2,
imgsrc:"../Images/2.jpg ",
text:"Even in a job interview your smile can lead to a favourable situation"
}
]
export default Data;
I hope that React considers the 2 components and distribute them horizontally.
"It seems that React does not consider the 2 components that were generated from props", there is only one containerCardelement inside the containerMeeting element. Thus nothing to align in a row.
When you map over Data what it will return will look like this
<div className="containerMeeting">
<div className="containerCard">
<img src="../Images/1.jpg " alt="Girl" />
<p>Well-aligned teeth and fresher breath always leave a good impression when meeting a person for the first time.</p>
</div>
</div>
<div className="containerMeeting">
<div className="containerCard">
<img src="../Images/2.jpg " alt="Girl" />
<p>Even in a job interview your smile can lead to a favourable situation</p>
</div>
</div>
If you want to make your containerCard elements appear in a row you should move the containerMeeting element out of the Meeting component and use it to surround Data.map
const Meeting = (props) => {
return (
<div className="containerCard">
<img src={props.imgsrc} alt="Girl" />
<p>{props.text}</p>
</div>
);
};
<div className="containerMeeting">
{Data.map((values) => {
return (
<Meeting key={values.id} imgsrc={values.imgsrc} text={values.text} />
);
})}
</div>
i am currently working on chat application with sockets , when i get different messages i use an array and then use map method to display them in simple html tags like p etc it worked perfect but inside text-area its not working i also tried to set text-area value property with map method but only i see is [object object] . also how can i automatically move the scroll bar down when messages there are more messages.
here is the code
import { Fragment, useEffect } from "react";
import { format } from "date-fns";
const Chat = ({ name, message }) => {
const date = new Date();
const hour = date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
console.log("so bteay", message);
return (
<Fragment>
<div>
<h3 className="d-inline-block me-3"> Chat log </h3>
{name && (
<span className="me-3 d-inline-block">
<div
class="spinner-grow spinner-grow-sm text-success"
style={{ fontSize: "10px" }}
role="status"
>
<span class="visually-hidden">Loading...</span>
</div>
</span>
)}
<small className="text-muted d-block "> {name}</small>
<textarea
cols="70"
rows="8"
value={message.map((eachMsg) => {
return (
<Fragment>
{
<small className="text-muted d-inline-block">{`${hour}:${minute}:${second}`}</small>
}
<p
className="d-block shadow p-1 fw-bold rounded text-success"
style={{ fontFamily: "cursive" }}
>
{eachMsg}
</p>
</Fragment>
);
})}
></textarea>
</div>
</Fragment>
);
};
export default Chat;
You can only pass 1 child ( text in this case ) to text area. But you are trying to pass an array. If what you meant to do is to have as many as textareas as your array, this is how you should go about it:
const texts = ["Hi", "Bye","done"];
<div>
{texts.map((text) => (
<textarea>text</textarea>
))}
</div>
but if you are trying to have 1 textarea with all your texts inside it, first you need to create a long string using join method, and then render that string.
I think that you can't set html code inside textarea, unless you want to show it as a text?
Currently I'm using NextJs as my frontend and Strapi as my CMS for my web application. I've added the following data to my Citizenship collection type in Strapi:
This is my code in the NextJs side:
export default function Citizenship({ posts }) {
return (
<>
<div style={{textAlign:"center", marginTop:"20px", fontSize:"25px", color:"#0E2043", fontWeight: "500"}}>CITIZENSHIP</div>
<div class="flexbox-container" style={{margin:"70px", marginTop:"0px"}}>
{
posts &&
posts.map((post) => (
<div style={{ padding: "40px" }}>
<div class="citizen-item" key={post.id}>
<div className="container6">
<img
style={{ height: "50%", width: "100%" }}
src={post.Thumbnail.name}
/>
<div style={{textAlign:"center", color:"#E3AB50", padding:"10px", fontSize:"20px"}}>{post.Title}</div>
<div style={{textAlign:"center", color:"#000", padding:"10px", fontSize:"15px"}}>Access to {post.Countries} countries</div>
<div style={{display:"flex", justifyContent:"center", paddingTop:"20px", paddingBottom:"10px"}}>
<button class="findButton">FIND OUT MORE</button>
</div>
</div>
</div>
</div>
))}
</div>
</>
)
}
export async function getStaticProps() {
const res = await fetch('http://localhost:1337/citizenships');
const posts = await res.json();
return {
props: {posts},
}
}
In my output, everything is coming fine except for the Image where it is only showing my first image and all the others are giving a 404. How do I fix this?
Use console.log(post) and find what your post returns in your browser console . If it gives Thumbnail then use it .Or else use what it gives .
use postman for that route with populate query (at the end add "?populate=*") and u will get the complete position of the url of you image and use it .
I can't find any examples of accordions where the active class is related to an element outside of the accordion. I'm trying to get an image to change on the side of the accordion, where each image is related to a specific object. I managed to get something working using absolute positioning, but I'm looking for a more elegant solution so I can manipulate styling better.
I can get it to work while the image is inside the accordion under the info text, but can't figure out the styling issue. I think I need to do some refactoring or do away with the array mapping to get it to work but I'm not sure.
Here is a codesandbox of more or less what I want to achieve but without the restriction of absolute positioning - https://codesandbox.io/s/ecstatic-taussig-f084t?file=/src/App.js
You can remove your img tag from your renderedItems and do something like this:
import React, { useState } from "react";
const Accordion = ({ items }) => {
const [activeIndex, setActiveIndex] = useState(0);
const onTitleClick = (index) => {
setActiveIndex(index);
};
const renderedItems = items.map((item, index) => {
const active = index === activeIndex ? "active" : "";
return (
<div key={item.title}>
<div className={`title ${active}`} onClick={() => onTitleClick(index)}>
<i className="dropdown icon"></i>
{item.title}
</div>
<div className={`content ${active}`}>
<p>{item.content}</p>
</div>
</div>
);
});
return (
<div className="container-gallery">
<div className="ui styled accordion">{renderedItems}</div>
<img
className={`content `}
src={`${items[activeIndex].image}`}
style={{
height: "200px",
width: "200px"
}}
alt="img"
/>
</div>
);
};
export default Accordion;
And for the style I don't know what you are using so I made css for the example:
.container-gallery{
display:flex;
flex-wrap:no-wrap;
justify-content: space-between;
}
here a sandBox link
The state
state = {
posts: [],
}
The posts gets an API value of
{
"authors": [
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
{
"authorName": "Sideney Sheldon",
"authorImageURL": "http..."
},
....
]
}
code
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) :
(
<div className="center">No posts to show</div>
);
return(
{postList}
)
}
The {postlist} returns objects but it returns each object in a new row in the webpage
I want all the results(images) in the same row
can anyone please help?
If you want multiple elements in the same row, you could achieve that with css. Use display: flex(by default flex-direction is row which is what you need) on the wrapper to postList. You can either pass it as a style though JSX or add a class that specifies this property
render(){
const postList = posts.length ? (
posts.map(post => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
return(
<div style={{display: 'flex'}}>{postList}</div>
)
}
Here's a CodeSandbox sample I created using your code.
If you're trying to line up the users horizontally (from left to right), CSS is the way to go. In particular, the <div> that is being mapped has, by default, the display: block style which makes it occupy its own row in the page.
To line up divs side by side, you need to somehow apply the display: inline-block style. In my example I used a style prop, but you will likely want to do it in CSS directly.
This is a CSS problem, you should use display: flex together with flex-direction: row on the parent div which will provide the desired result.
posts.map(post,index => {
return (
<div className="" key={this.state.key}>
<div className="containerimager">
<img style={imgb} src={post.authors[index].authorImageURL} />
</div>
<h6 style={{ marginTop:"23px"}} >{post.authors[index].authorName}</h6>
</div>
)
})
) : (
<div className="center">No posts to show</div>
);
Try this