is it possible to write a if statement in the return() from the save props in react?
Because when i write down a if statement i only see the code at the front-end.
So the following is happening:
I created a Selectcontrol:
<SelectControl
label={ __( 'Press ctrl to multiple stars:' ) }
value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
options={ [
{ value: null, label: 'Select a Star', disabled: false },
{ value: 'star' , label: 'Add 1 star' },
{ value: 'star2', label: 'Add 2 stars' },
{ value: 'star3', label: 'Add 3 stars' },
{ value: 'star4', label: 'Add 4 stars' },
{ value: 'star5', label: 'Add 5 stars' },
] }
/>I render it with the following code to have stars in the back-end:
selectcontrolDisplay = props.attributes.testimonial.map( ( testimonial, index ) => {
if (testimonial.selectcontrol == 'star') {
return (testimonial.selectcontrol == 'star') ? <span><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
} else if (testimonial.selectcontrol == 'star2') {
return (testimonial.selectcontrol == 'star2') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
} else if (testimonial.selectcontrol == 'star3') {
return (testimonial.selectcontrol == 'star3') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
} else if (testimonial.selectcontrol == 'star4') {
return (testimonial.selectcontrol == 'star4') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>: testimonial.selectcontrol;
} else if (testimonial.selectcontrol == 'star5') {
return (testimonial.selectcontrol == 'star5') ? <span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span> : testimonial.selectcontrol;
}
} );In the editor part i have the following part:
{selectcontrolDisplay && selectcontrolDisplay.map((selectcontrolValue, i) =>
<div className="wp-block-cgb-block-project-drie-testimonial-ratings">
<div className="wp-block-cgb-block-project-drie-testimonial-rating">
<h2>Rating</h2>
{selectcontrolValue}
</div>
</div>
)}So above is working correctly, but the hardest part for me is to get the result at the front-end.
So i thought i could make it work with a if statement. But i only see the code at the front-end and not the result with only stars. Could some on give me advice how to make this work?
save: ( props ) => {
const {attributes: { selectcontrol } } = props;
return (
html code.....
if (selectcontrol == 'star') {
<span><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star2') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star3') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star4') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star5') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
}
)
}For a better overview:
save: ( props ) => {
const {attributes: { title } } = props;
const {attributes: { subtitle } } = props;
const {attributes: { media} } = props;
const {attributes: { testimonial } } = props;
const {attributes: { selectcontrol } } = props;
return (
<section className="testimonial">
<Helmet>
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
</Helmet>
<div className="container testimonial__container">
<div className="row testimonial__row">
<div className="testimonial__info">
<div className="testimonial__subtext">
<span>{ subtitle }</span>
</div>
<div className="testimonial__title">
<h2>{ title }</h2>
</div>
</div>
<div className="items testimonial__testimonials">
{testimonial.map((field, i) => (
<div className="testimonial__testimonial">
<div className="testimonial__card" key={ i }>
<div className="testimonial__image">
<img src={field.media.url} />
</div>
<div className="testimonial__review">
<p>{field.testimonial}</p>
</div>
if (selectcontrol == 'star') {
<span><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star2') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star3') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star4') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
} else if (selectcontrol == 'star5') {
<span><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i><i className="fas fa-star checked"></i></span>
}
<div className="testimonial__stars">
<span>{testimonial.selectcontrol}</span>
</div>
<div className="testimonial__author">
<div className="testimonial__name">
<span>{ field.author }</span>
</div>
<div className="testimonial__function">
<span>{ field.position }</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</section>
);
},