Is there a way for me to retrieve dynamic text?

I used an "IF" statement to display dynamic text - if it's null, show something, otherwise show something else. However, I am getting a blank result. What did I do wrong?

<View style={styles.rightContainer}>
    { () =>{        
        if(this.state.sicafSource.IdStatusManutencao == null){

            return(
                <View style={[{paddingHorizontal:10, marginTop:5,borderRadius:5},this.ReturnColor("Not found in API","ACTIVE")]}>
                        <Text style={[{ textAlign: 'right' }, styles.swipeCardRightTextS]}>
                                No information available 
                        </Text>
                </View>
            );

    }
    else{

        return(
            <View style={[{paddingHorizontal:10, marginTop:5,borderRadius:5},this.ReturnColor("Not found in API","ACTIVE")]}>
                <Text style={[{ textAlign: 'right' }, styles.swipeCardRightTextS]}>
                    API response is true 
                </Text>
            </View>          

        );
    }
}
    }
</View>
javascriptreact-native

Answer №1

To incorporate conditional rendering in JSX, it is essential to utilize the ternary operator. The content enclosed within curly braces {} must be an expression that yields a value as opposed to statements. More information on expressions versus statements can be found at .

{this.state.exampleVariable == null ? (
    <div>Display this when condition is true</div>
) : (
    <div>Display this when condition is false</div>
)

Answer №2

To resolve this issue, you can execute your anonymous function to ensure the if statement is assessed:

() => {
  // ...
} () // make sure to include these

However, a more concise approach is to use ternary operators or boolean operators. Instead of 

if (X) {
  Y;
} else {
  Z;
}

You have the option to either

X ? Y : Z

or

X && Y || Z

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to extract a div from a third-party domain and showcase it on my website?

Trying to integrate content from my Veetle.com channel onto my personal website has proven to be quite the challenge. Initially, I attempted to modify an iframe with CSS to display only the schedule information, but encountered limitations due to using 3rd ...

javascriptcssiframecross-domaindynamic-data

Guide on utilizing ajax to post data when the URL parameter changes, all without refreshing the page

As the URL parameter changes, the values in my HTML also change. I am passing these values to a JSON file, but they are getting erased when the page refreshes due to the post request. I have attempted to use event.preventDefault(), however, it seems to n ...

javascriptphpjqueryajax

Do not allow the use of <p> or <br> tags in

I would like to enable basic styling with <strong>, <em> and lists using ckeditor. But I do not want any <br> or paragraph tags because I normalize my content and prefer it to be clean. After some research online, I came across this sol ...

javascriptjqueryckeditor

The AddClass function fails to function properly after an ajax form is submitted

I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...

javascriptjquerycssajaxvalidation

Is Apollo Client in NextJS failing to refresh data post mutation?

On this page, you can create a new User const [createType, { loading, data }] = useMutation(CREATE_USER_CLASS) //mutation query const createUserClass = async (event) => { event.preventDefault(); try { const { data } = await createType({ ...

javascriptnext.jsapollo-client

There has been a mistake: The module '.... ode_modules erser-webpack-plugindistindex.js' cannot be found. Please ensure that the package.json file contains a correct "main" entry

After setting up Vue.js and executing npm run serve, I encountered the following error: PS C:\Amit\Demo\VUEDemo\myvue> npm run serve > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f5e1eeedfdd8a8b6 ...

javascriptnode.jsvue.jsnpmwebpack

What is the method for identifying the name of a CSS Variable currently in use?

Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...

javascriptcssvariables

What is the proper way to invoke a function in the code-behind using JavaScript?

I need to invoke a function in the code behind from JavaScript Button : <button class = "btn btn-outline btn-danger dim" type = "button" onclick = "confirmDelete ()"> <i class = "fa fa-trash"> </i> ...

javascriptc#asp.netbuttononclick

Fade out the jQuery message after a brief 2-second pause

In my Rails application, I encountered an issue with a flash message that appears after successfully completing an AJAX action. The message displays "Patient Added" but does not include a way to close it without refreshing the page. To address this, I atte ...

javascriptjquery

Jade iterates over each object element, assigning its children to their respective parent elements

I have a JavaScript Object named "boards". [{"id":1,"parent_board":0,"title":"Lorem 1","description":"ec40db959345153a9912"}, {"id":2,"parent_board":0,"title":"Lorem 2","description":"bb698136a211ebb1dfedb"}, {"id":3,"parent_board":1,"title":"Lorem 1-1"," ...

javascriptnode.jsexpresspug

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

javascripthtmlcsshyperlinkhtml-table

What is the best way to conceal an element when another element is given a specific class?

Imagine you have 2 buttons The first button <button class="arguments variation-one">Some text</button> - this button has dynamic classes like: variation-one, variation-two, variation-three, but the .arguments class remains static. a ...

javascriptjquerycsshideshow-hide

Unable to retrieve custom date picker value with React Antd

I have implemented a custom datepicker for entering dates in the 'MMDD' or 'MMDDYY' format. The date value is stored in state and used in the datepicker component as a controlled component. However, upon form submission, the datepicker ...

javascriptreactjsdatepickerantd

I am looking to sort users based on their chosen names

I have a task where I need to filter users from a list based on the name selected from another field called Select Name. The data associated with the selected name should display only the users related to that data in a field called username. Currently, wh ...

javascriptreactjs

Creating personalized Date and Time formatting on the X axis in Lightningchart JS

I have an X-axis representing time intervals in 15-second increments. ["2020-05-22 14:20:22", "173.9"] ["2020-05-22 14:20:40", "175.3"] ["2020-05-22 14:20:58", "172.4"] In my attempt to add this data to the chart, I used the following code: for(var key ...

javascriptlightningchart

Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module

I have posted my module, component, and package file here. I am attempting to implement a click event with ngif, but I keep encountering an error. The specific error message is "ERROR in NgSemanticModule is not an NgModule". I'm unsure if this error ...

javascriptangularjstypescriptsemantic-ui

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

I am looking to retrieve a JSON object from a database and convert it into HTML format. Here is an example of the JSON structure: {"input":{ "name":"fname", "type":"text", "placeholder":"Ente ...

javascriptc#htmljqueryjson

How should elements be properly inserted into injected HTML code?

We are currently phasing out our custom forms in React on the website, and transitioning to Microsoft Dynamics 365 generated forms. These new forms are injected through a React placeholder component created by a script that loads the js bundle and inserts ...

javascriptreactjsreact-nativedynamics-365

I am trying to access the id of the button that was selected, but I am unsure of how to retrieve the id from it. The method of using

I am trying to retrieve the id of a selected button for deletion purposes. However, I am unable to get the id from it using 'this.id'. Is there another method I should be using? Below is the code where I create the button: var deleteEmployer= d ...

javascriptrest

Is it possible to pass hooks as a property value from a useEffect in React.js?

As a newcomer to React, I am struggling to grasp the concept of how to use useEffect effectively. In one of my components, I have an array of objects stored in a file named cardData.js. These objects are used to automatically create cards, each containing ...

javascriptreactjsreact-hooksundefined