conditional rendering not acting uniformly in reactjs?

Question

I have used conditional rendering in the past but for some reason, it's working on one element here but not on another although they are both using the same JSON phrasing and the same type of conditional rendering?

JSON array

//Adobe component data

export default[
    {
        workName: 'Switch up your "Grub" Motiongraphic',
        workDescription: 'This is a motion graphic comparing the environmental and health effects of consuming animal products compared to insects as dietary source of protein.',
        workTech: ['Adobe After effects'],
        videoAddress: ['https://youtu.be/cloat51hzDY'],
        Images: []
    },

    {
        workName: 'Simplyfit concept poster',
         workDescription: 'This is a poster developed explaining the concept of Simplyfit, a fitness application developed as part of my final year project.',
        workTech: ['Adobe Illustrator'],
        videoAddress: [],
        Images: ['SFPoster.jpg'],
    },

    {
        workName: 'Switch up your "Grub" Infographic',
         workDescription: 'This is an infographic developed explaining the benefits of consuming insects as a source of protein.',
        workTech: ['Adobe Illustrator'],
        videoAddress: [],
        Images: ['insectMotiongraphic.png'],
    },

    {
        workName: 'Crunchy Nut Advert spoof',
         workDescription: 'This video was made as a comedic spoof of a Crunchy Nut advert',
        workTech: ['Adobe Premier Pro'],
        videoAddress: ['https://youtu.be/y8S2RUYrLN8'],
        Images: [],
    },

    {
        workName: 'Icons and Designs',
        workDescription: 'These are a selection of logos and icons created by me.',
        workTech: ['Adobe Premier Pro'],
        videoAddress: [],
        Images: ['Mylogo.png'],
    },
    
]

The problem I'm having is with the 'videoAdress' and the 'Images' I've tried setting null values undefined etc for them both but for the images the only thing that stops them from rendering is setting the value as [] but this doesn't work for the videoAdress the iframe is still rendered?

React js code

{Data.map((Projects, index) => {
                        return <div className='Cards'>
                            <Carousel showThumbs={false} infiniteLoop={true} swipeable={false} emulateTouch={false} showStatus={false} autoPlay={slideShow} dynamicHeight={false}>
                                {Projects.Images && Projects.Images.map((Image, index) => { return <div className='image-iframeContainer'><img src={require("../assets/Port-images/Adobe/" + Image)} /></div> })}
                                {Projects.videoAddress && <div className='image-iframeContainer'><ReactPlayer url={Projects.videoAddress} muted={false} controls={false} onPlay={autoplayChange} onPause={autoplayChange} onEnded={autoplayChange} /></div>}
                            </Carousel>
                            {Projects.webAddress && <div className='webButton'><LinkIcon onClick=  { () => {window.open(Projects.webAddress);}}/></div>}
                            <h1>{Projects.workName}</h1>
                            {Projects.workTech.map((Tech, index) => { return <p className='techList'>{Tech}</p> })}
                            <div className='descriptionContainer'>
                                <p className='description'>{Projects.workDescription}</p>
                            </div>
                        </div>
                    })}

The function I would like is for the Images and Videos only to render if there is a stored address I'm sure I'm missing something very silly but still, I've been stuck on this for awhile.

Answer 1

Conditional rendering works by casting the condition to a truthy value. For example:

Projects.Images && <Component />

is equal to this:

!!Project.Images && <Component />

Now if you do this for an empty array [], the truthy value is TRUE . This means that <ReactPlayer /> is rendered with [] value and the <img /> is not rendered because [].map() doesn't run on an empty array.

To fix this do this instead:

{Projects.Images && Projects.Images.length > 0 && Projects.Images.map((Image, index) => {
  return <div className='image-iframeContainer'>
    <img src={require("../assets/Port-images/Adobe/" + Image)} />
  </div>
})} 

{Projects.videoAddress && Projects.videoAddress.length > 0 &&
<div className='image-iframeContainer'>
  <ReactPlayer url={Projects.videoAddress[0]} muted={false} controls={false} onPlay={autoplayChange} onPause={autoplayChange} onEnded={autoplayChange} />
</div>}

I noticed that your videoAddress doesn't use the map() method, but I guess it's a typo