JavaScript for WordPress › Forums › Gutenberg Development › Toggle Control conditional › Reply To: Toggle Control conditional
April 4, 2020 at 12:28 pm
#139259
chrisdavies71
Participant
Hi Zac,
I was not getting any error it was just not rendering the image.
Just starting out really with Gutenberg/JSX but I found this link 7-ways-to-implement-conditional-rendering-in-react-applications and used the Ternary Operators solution.
Code now looks like this and works
) : (
<Fragment>
<p class="image-wrapper">
<img
src={ imgURL }
alt={ imgAlt }
/>
</p>
{ carouselControls ?
<Fragment>
<a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</Fragment>
: ''
}
</Fragment>
) //end if has image
It could probably be tidied up in places. Thanks for the help though.
Chris