how to not display an element if it is undefined react

Question

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

To avoid the error use optional chaining. And as the others answered, you should iterate through your array rather than copying the divs as many times as you may think it is necessary. — Botond Balogh
– Botond Balogh, Commented Jan 5, 2023 at 7:26

kiranvj · Accepted Answer · 2023-01-05 07:18:47Z

1

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

answered Jan 5, 2023 at 7:18

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Subham Jain · Accepted Answer · 2023-01-05 07:02:01Z

1

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.

answered Jan 5, 2023 at 7:02

Subham Jain

3373 silver badges9 bronze badges

3 Comments

Fiag Over a year ago

I got 3 cubes, the other 3 should be divs

Subham Jain Over a year ago

You can make use of the ternary operator as mentioned by @kiranvj

Fiag Over a year ago

Oh sorry. I didn't understand much of the code. Now everything is fine, it works. Thanks

sandip rana · Accepted Answer · 2023-01-05 09:37:15Z

0

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

answered Jan 5, 2023 at 9:37

sandip rana

662 bronze badges

Collectives™ on Stack Overflow

how to not display an element if it is undefined react

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related