Saturday, 24 June 2023

How to show script from variable or function with html scripts value result into JSX React

 Today I will try to share information or tutorial about "How to show script from variable or function  with html scripts value result into JSX React ". This tutorial may be rare and short, but hope this information can help you. Okay lets see piece of code below :

This is a source code function that return html value 

export const getUiTableStatus = (val) =>{
    let retVal = '';
    if(val === '0'){
        retVal = `<span class="badge bg-danger">Start</span>`;
    }else if(val === '1'){
        retVal = `<span class="badge bg-warning">On Progress</span>`;
    }else{
        retVal = `<span class="badge bg-success">Done</span>`;
    }

    return retVal;
}


We will try to render the value of the above function into JSX react 

<div dangerouslySetInnerHTML={{__html: getUiTableStatus(result.status)}}>

The output of this poject like below :








Hope this information can help you. Any questions please leave comments below. Thanks
 


No comments:

Post a Comment