how to not display an element if it is undefined react-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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