CODEWITHSUNDEEP
javascriptnode.jsreactjs
user15576045
user15576045

Reputation:

how to call variable in jsx

I have defined a variable, and I am setting the contents of the variable = the image url like so:

  var regData = ""
firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 

      console.log(doc.data().registeringFlag); 
      regData = doc.data().registeringFlag;
      console.log("reg data " + regData)

      if (regData == "yes"){
        regData = "https://i.gifer.com/Z23Y.gif"

        firestore.collection('profiledata').doc(user.uid).set({
          registeringFlag: "no"
      })
    }
})

then I am trying to access the contents of regData inside my jsx code, like so:

 return (
    
    <BottomTabsWithFullHeightContent onChange={ (activeKey) => pushHistoryForTab(props.history, activeKey) } activeKey={props.showTab}>

      <div className="container"><img src={ regData } width="300px" height="300px"/></div>

    </BottomTabsWithFullHeightContent>
    
  )
}

however, it is not actually showing the image on screen like it is supposed to. It gives me:

TypeError: null is not an object

How do I fix this?

here's the try with .then:

var regData = ""
firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 

      console.log(doc.data().registeringFlag); 
      regData = doc.data().registeringFlag;
      console.log("reg data " + regData)

      if (regData == "yes"){
        regData = '"https://i.gifer.com/Z23Y.gif"'

        firestore.collection('profiledata').doc(user.uid).set({
          registeringFlag: "no"
      })
    }
}).then (() => {


  return (
    
    <BottomTabsWithFullHeightContent onChange={ (activeKey) => pushHistoryForTab(props.history, activeKey) } activeKey={props.showTab}>
      <TabPane tab={ <VerticalCaptionedIcon type="contacts" theme="filled" caption="Clients" /> } key={ routes.CLIENTS }>
        <ClientTabContent { ...props }/>
      </TabPane>
      <TabPane tab={ <VerticalCaptionedIcon type="file-text" theme="filled" caption="Estimates" /> } key={ routes.ESTIMATES }>
        <EstimateTabContent { ... props }/>
      </TabPane>
      <TabPane tab={ <VerticalCaptionedIcon type="form" caption="Jobs" /> } key={ routes.JOBS }>
        <JobTabContent { ... props }/>
      </TabPane>
      <TabPane tab={ <VerticalCaptionedIcon type="user" caption="Profile" /> } key={ routes.PROFILE }>
        <UserProfileContent { ... props }/>
      </TabPane>
      

      <div className="container"><img src={ regData }width="300px" height="300px"/></div>
      { console.log("rd: " + regData) }

    </BottomTabsWithFullHeightContent>
    
  )
})

}

Upvotes: 1

Views: 64

Answers (1)

Sifat Haque
Sifat Haque

Reputation: 6057

You need to use component level state to manipulate dynamic async data. Here is the modified version of your code.

import {useState} from 'react';

const [regData, setRegData] = useState('');

firestore.collection("profiledata").doc(user.uid).get().then((doc) => { 
      setRegData(doc.data().registeringFlag);

      if (regData == "yes"){
        setRegData("https://i.gifer.com/Z23Y.gif");
        firestore.collection('profiledata').doc(user.uid).set({
          registeringFlag: "no"
      })
    }
})


 return (
    
    <BottomTabsWithFullHeightContent onChange={ (activeKey) => pushHistoryForTab(props.history, activeKey) } activeKey={props.showTab}>

   {regData && <div className="container"><img src={ regData } width="300px" height="300px"/></div>}

    </BottomTabsWithFullHeightContent>
    
  )
}

Upvotes: 1

Related Questions