Develop Reference

how to not display an element if it is undefined react

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>)}
</>

How do I make bulma tiles smaller in React.js?

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>
);

I only returning 1 card an an image from the array of objects using React js

I have this data
[
{
"filePath": "imageFile",
"locationName": "name1"
},
{
"filePath": "imageFile",
"locationName": "name2"
}
]
and I am returning the value of filePath to display images using React js in a card like this:
const images = (displayimage) => {
return displayImages.map((displayimage, key) => (
<div key={key}>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{displayimage.locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={displayimage.filePath} />
</div>
</div>
</div>
</div>
));
}
return <div>{images()}</div>;
};
but only 1 card is returning then the image is returning randomly based on which object is displayed 1st in the console.log(displayImages).
how can I display all each cards per images? Thanks

What you need to store in the images constant is just the result of calling map() on your displayImages array. So assuming you have:
const displayImages = [
{
filePath: "imageFile",
locationName: "name1"
},
{
filePath: "imageFile",
locationName: "name2"
}
];
this is how your component should look like:
const images = displayImages.map((displayimage, key) => (
<div key={key}>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{displayimage.locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={displayimage.filePath} />
</div>
</div>
</div>
</div>
));
return <div>{images}</div>;
Working stackblitz

It looks like your function takes in an argument displayimage but then you map over a variable called displayimages (note the s), .
Additionally when you call the function in the return statement there are no arguments provided.
I'm not sure if you've addressed the above issues in your actual code, but it would definitely create problems.
If you have addressed those problems what I would recommend is creating a component called something like ImageCard that takes in the image location name and file path as props, e.g.
const ImageCard= ({locationName,imagePath}) => {
return (
<div>
<div className="card bg-light mb-3">
<div className="card-header">
<center>{locationName}</center>
</div>
<div className="card-body">
<div className="imgDiv">
<img src={filePath} />
</div>
</div>
</div>
</div>)
};
export default ImageCard;
Then, where you are currently doing your map, iterate over your image data in the return as follows (assuming your data is called displayImages)
return (
displayImages.map(displayImage=>{
return (
<ImageCard
locationName={displayImage.locationName}
imagePath={displayImage.filePath}
/>
);
}
)

Reactjs: Cannot read URL property of null, fetching from an API

I have products in json format that are fetched and shown in the frontend. In my products.json there is an image url for each products, but only some have image urls in them, others are empty. When I am looping the data in react I always get error in my react app saying Cannot read property of null in the tag, how do I write a logic that only renders the image when there is an image source else just return an empty div?
<ul>
{this.state.items.map((items, index) => {
return (
<li className="ProductList-product" key={items.id}>
<h3>{items.title}</h3>
<p>{items.description}</p>
<div className="price-box">
<p>from: {items.price} $</p>
</div>
<div>
{<img src={items.photo} alt=""/>}
{/* {console.log(items.photo.id)} */}
</div>
</li>
);
})}
</ul>

replace your
{<img src={items.photo} alt=""/>}
with
{items.photo && <img src={items.photo} alt=""/>}
it will only render img element when item.photo is not null.

You can set a condition. For example:
<ul>
{this.state.items.map((items, index) => {
return (
<li className="ProductList-product" key={items.id}>
<h3>{items.title}</h3>
<p>{items.description}</p>
<div className="price-box">
<p>from: {items.price} $</p>
</div>
{items.photo
? <div>
{<img src={items.photo} alt=""/>}
{/* {console.log(items.photo.id)} */}
</div>
: <div></div>
</li>
);
})}
</ul>

React JS render list data in separate row

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>
)