Change fields names in React - reactjs

Question

I currently have this code, and in a spam it calls {image.processamento.result}
renderImgs() {
const { images, loadingFetchImages } = this.state;
if (loadingFetchImages) {
return <Loading />;
}
return images.map(image => (
<div key={image.processamento.id} className="col-2">
<div role="button" tabIndex={0} onKeyPress={() => this.checkImage(image.processamento.id)} onClick={() => this.checkImage(image.processamento.id)} className={`lista-img-validar ${image.check ? 'active' : ''}`}>
<figure>
<img src={image.public_url} id="image-authorize" className="img-responsive" alt="Imagem da prova" />
</figure>
<figcaption>
<div className="col-12">
<article className="text-left">
<span className="validador-txt-destaque">{image.processamento.co_inscricao}</span>
</article>
</div>
<div className="col-12">
<article className="text-left mt-2">
<span className="validador-txt-destaque-silver">Lote: </span>
<span>{image.processamento.batch}</span>
</article>
</div>
<div className="col-12">
<article className="text-left mt-2">
<span className="validador-txt-destaque-silver">Situação: </span>
<span>{image.processamento.result}</span>
</article>
</div>
</figcaption>
</div>
</div>
));
}
{image.processamento.result} can return 3 values, "essay", "inssuficient" and "blank", all that I want to do is change this names when I'm rendering the images to the user, for ex. I want that "blank" becomes "Sem texto."
I'm confused because inside a return I can't use conditionals like if else etc, can someone help me?

Answer 1

renderImgs() {
const { images, loadingFetchImages } = this.state;
if (loadingFetchImages) {
return <Loading />;
}
const getFriendlyName = function(name) {
if(name == "blank"){
return "Sem texto
}
return name
}
return images.map(image => (
<div key={image.processamento.id} className="col-2">
<div role="button" tabIndex={0} onKeyPress={() => this.checkImage(image.processamento.id)} onClick={() => this.checkImage(image.processamento.id)} className={`lista-img-validar ${image.check ? 'active' : ''}`}>
<figure>
<img src={image.public_url} id="image-authorize" className="img-responsive" alt="Imagem da prova" />
</figure>
<figcaption>
<div className="col-12">
<article className="text-left">
<span className="validador-txt-destaque">{image.processamento.co_inscricao}</span>
</article>
</div>
<div className="col-12">
<article className="text-left mt-2">
<span className="validador-txt-destaque-silver">Lote: </span>
<span>{image.processamento.batch}</span>
</article>
</div>
<div className="col-12">
<article className="text-left mt-2">
<span className="validador-txt-destaque-silver">Situação: </span>
<span>{getFriendlyName(image.processamento.result)}</span>
</article>
</div>
</figcaption>
</div>
</div>
));
}

Answer 2

Do like this.
<span>{image.processamento.result == "blank" ? "Sem texto" : image.processamento.result }</span>

Answer 3

You could do this from many ways, I think the right way you can do this:
const status = [
blank:"some blank text",
essay:"some essay text",
inssuficient:"some inssuficient text"
];
<span>{status[image.processamento.result]}</span>

Answer 4

Ternary operators are essential in JSX. They can also be chained, much like if/elses,
This would be valid:
<span>{image.processamento.result === 'blank' ? "Sem texto" : image.processamento.result === 'insufficient' ? 'Não suficiente' : image.processamento.result }</span>
Of course, this can all be abstracted before returning the jsx tag into if statements. Inside your map, instead of a shorthand return, you would just do an explicit return, and declare a variable representing the result before that. But that's really just a matter of preference.