I managed to get my 12 tiles in order and wrapping around. They take up the whole page, however. I've tried putting the whole component in a section, a hero...etc. but they keep taking up the whole page.
How do I get them all to fit into a subsection of the page, or at least a smaller portion of the page?
here's my code:
return (
<div>
{aChunks().map((chunk, index) => {
return (
<div className="tile is-ancestor" key={index}>
{chunk.map((horoscope) => (
<div key={horoscope.sign} className="tile is-parent is-4">
<div className="tile is-child box">
<figure className="image">
<img src={horoscope.art} alt="some sign"></img>
</figure>
<p className="title">{horoscope.sign}</p>
<p>{horoscope.horoscope}</p>
</div>
</div>
))}
</div>
);
})}
</div>
);
Related
There is the following problem. I have 6 divs on the page, which may or may not contain an image. Let's say I have 3 pictures in the array and these pictures should be displayed in a div, and the remaining 3 elements should be a div (for example, with a background) I roughly solved it, but if this element is not found in the array, then the application crashes. Crashing because some element is missing. In the console, an error like sixb[3] is undefined.
Item Display
<div className='blocksix all'>
<img src={sixb[0].img} />
</div>
<div className='blocksix all'>
<img src={sixb[1].img} />
</div>
<div className='blocksix all'>
<img src={sixb[2].img} />
</div>
<div className='blocksix all'>
<img src={sixb[3].img} />
</div>
<div className='blocksix all'>
<img src={sixb[4].img} />
</div>
<div className='blocksix all'>
<img src={sixb[5].img} />
</div>
Array of elements
let [sixb , setsixb] = useState([
{img:"https://www.zonkpro.ru/zonk/assets/dice/mini/1.png"},
{id:2,title:2, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/2.png" , style: 'none'},
{id:3,title:3, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/3.png" , style: 'none'},
{id:4,title:4, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/4.png" , style: 'none'},
{id:5,title:5, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/5.png" , style: 'none'},
{id:6,title:6, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/6.png" , style: 'none'},
])
No ideas yet how to solve
Try ternary operator and optional chaining
<div className='blocksix all'>
{sixb?.[1]?.img ? <img src={sixb[1].img} /> : <div className='some-background'>No image</div>}
</div>
Generic way of doing it -
{setsixb.map((item, index)=>{
retrun <div className='blocksix all' key={index}>
{item?.img ? <img src={item.img} /> : <div className='some-background'>No image</div>}
</div>
})
}
You can use conditional rendering in this scenario.
<div className='blocksix all'>
{sixb[0] && sixb[0].img && (<img src={sixb[0].img} />)}
</div>
Note:- Instead of writing the same div 6 times, just iterate over the array and display them.
{
sixb.map((each,index) => {
return (
<div key={index} className='blocksix all'>
{each && each.img && (<img src={each.img} />)}
</div>
)
})
}
For key, I have used index as you don't have any unique property in an object. If you can make the id mandatory then use id as the key.
This way the code is more clean and readable.
You should try this,
<>
{sixb.map((element, index) => element?.img ? <div key={index} className="block-image"><img src="img" /></div> : <div key={index} className="no-image">No Image found</div>)}
</>
I have a re-render issue with a slider which appears in every element from a map.
const Attractions = () => {
const [slide, setSlide] = useState(0)
const handleSlider = (direction) => {
if(direction === "right"){
setSlide(slide + 1)
}else{
setSlide(slide - 1)
}
}
const translation = slide * - 110
return (
<div className="attractions">
<Navbar />
<Header nav={"attractions"}/>
<div className="attractionsContainer">
<div className="attractionsWrapper">
<div className="left">
</div>
<div className="right">
{attractionList.map(attraction => (
<div className="attractionWrapper" key={attraction.id}>
<div className="top">
<div className="topLeft">
<img src="https://holidaystoswitzerland.com/wp-content/uploads/2019/09/Lauterbrunnen.jpg.webp" alt="" className="avatarImg"/>
</div>
<div className="topRight">
<div className="title">{attraction.name}</div>
<div className="location"><LocationOnOutlinedIcon/>{attraction.location.city}, {attraction.location.country}</div>
</div>
<div className="moreInfo">
<MoreVertOutlinedIcon/>
</div>
</div>
<div className="middle">
<div className="sliderWrapper">
{slide > 0 &&
<div className="left" onClick={()=>handleSlider("left")}>
<ArrowBackIosNewOutlinedIcon style={{fontSize: "30px"}}/>
</div>
}
<div className="slider" style={{transform: `translateX(${translation}%)`}}>
{attraction.img.map(img =>(
<img src={img} alt="" />
))}
</div>
{slide < 2 &&
<div className="right" onClick={()=>handleSlider("right")}>
<ArrowForwardIosOutlinedIcon style={{fontSize: "30px"}}/>
</div>
}
</div>
</div>
<div className="bottom">
<div className="interactions">
<FavoriteBorderOutlinedIcon className="actionBtn"/>
<ChatBubbleOutlineOutlinedIcon className="actionBtn"/>
<CheckCircleOutlineRoundedIcon className="actionBtn"/>
<AddCircleOutlineOutlinedIcon className="actionBtn" />
</div>
<div className="description">
{attraction.description}
</div>
<div className="comments">
{attraction.comments.map(comment =>(
<div className="commentItem">
<h4>{comment.user}</h4>
<span>{comment.comment}</span>
</div>
))}
</div>
</div>
</div>
))}
</div>
</div>
</div>
<Footer />
</div>
)
}
When i get more elements from the attractionList array, whenever i click on the left or right arrow to go to the next slide, all of the sliders from the list will do the same. I figured out that i should use something so that the slide is set only based on the item from the map, but honestly i have no idea how.
If you want them to behave differently, then the attraction object should have its own slide variable and setSlide method. That way you can just put:
onclick = {() => attraction.setSlide(attraction.slide + 1)}
I am new in reactjs and i am working with nextjs,I am fetching image from datbase via api, Right now i am getting image name with full path ( url.com/imagename) but i want to know how can we use dynamic path, in other words if i have only "image name" (not full path) so how can i append "image path" for display image using next js? I tried with following code
{this.state.books.map((post, index) => {
return (
<div className="col-md-4"
<div className="bookimg">
<img src={post.image} />
</div>
</div>
)
})}
Let's say that post.image give you the image name only with mimi type.
{this.state.books.map((post, index) => {
return (
<div className="col-md-4"
<div className="bookimg">
<img src={`myurl.com/image/${post.image}`} />
</div>
</div>
)
})}
I am facing an issue in React Js. I want to show names data in each separate row.
const names = ['James', 'John', 'Paul', 'Ringo'[![\]][1]][1];
My Code:
return (
<div class="col-lg-8 bar-name">
<div>
{names.map(filteredName => (
<li>
{filteredName}
</li>
))}
</div>
</div>)
How can i use in div element ? What should i do?
can anyone help me?
You need to add elements to want to be displayed alongside in the List tag.
Example:
return (
<div class="col-lg-8 bar-name">
<div>
{names.map(filteredName => (
<li>
{filteredName}
<div>
Ryan
</div>
<div>
Eric
</div>
</li>
))}
</div>
)
I'm utilizing several templates for creating webpages using Gatsby JS, with all the info for each template saved in a markdown file (CSS styling is done via Bulma).
----
path: /software/TestSoftware
title: TestSoftware
templateKey: mdSoftware
tags: ["analysis", "testing", "concrete"]
layoutType: page
---
Each page will have a variable number of tags. My question is how do I loop/iterate to style each tag within the javascript file? I have seen that it is considered bad form to include scripts within html (not that my script is currently working). There also seem to be conflicting information about whether using map or forEach is appropriate.
This is my sample component (with mapping that doesn't work...):
class mdSoftwareInsetPage extends React.Component {
render() {
const {html, frontmatter} = this.props.data.markdownRemark;
var softwareTags = frontmatter.tags;
return (
<section className="section hero">
<div className="hero-body">
<div className="container has-text-centered">
<h1 className="title">
{frontmatter.title}
</h1>
</div>
</div>
</section>
<section className="section">
<div className="container content">
<h3 className="specialties">
Specialties
</h3>
<div className="tags">
<script>
softwareTags.map((item, i) =>
<span className="tag is-primary is-medium">
${item}
</span>)
</script>
</div>
</div>
</section>
)
}
}
The rendered webpage should have the following HTML for the section containing the "Specialties":
<div className="container content">
<h3 className="specialties">
Specialties
</h3>
<div className="tags">
<span className="tag is-primary is-medium"> analysis </span>
<span className="tag is-primary is-medium"> testing </span>
<span className="tag is-primary is-medium"> concrete </span>
</div>
</div>
This should work:
<div className="tags">
{softwareTags.map(tag =>
<span className="tag is-primary is-medium" key={tag}>{tag}</span>
)}
</div>
Map is preferred since it returns an array (without you building one manually) and arrays are a valid child type in React.
You can simply use a JSX expression, only slightly more complex than the {frontmatter.title} expression you already have.
Note I also added React.Fragment to wrap your output:
class mdSoftwareInsetPage extends React.Component {
render() {
const {html, frontmatter} = this.props.data.markdownRemark;
var softwareTags = frontmatter.tags;
return (
<React.Fragment>
<section className="section hero">
<div className="hero-body">
<div className="container has-text-centered">
<h1 className="title">
{frontmatter.title}
</h1>
</div>
</div>
</section>
<section className="section">
<div className="container content">
<h3 className="specialties">
Specialties
</h3>
<div className="tags">
{
softwareTags.map((item, i) =>
<span className="tag is-primary is-medium">
${item}
</span>
)
}
</div>
</div>
</section>
</React.Fragment>
)
}
}