CODEWITHSUNDEEP
javascriptreactjsarraysobjectjsx
Fiag
Fiag

Reputation: 15

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

Upvotes: 1

Views: 789

Answers (3)

sandip rana
sandip rana

Reputation: 66

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

Upvotes: 0

kiranvj
kiranvj

Reputation: 34107

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

Upvotes: 1

Subham Jain
Subham Jain

Reputation: 337

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.

Upvotes: 1

Related Questions