title: Confused about the variable scope in REACT?
body: <p>I define a const before return(  but when I try to render it, get error its undefined.</p>
  <p>I am struggling with the concepts of REACT. Any constants or vars defined before RETURN are not available for rendering in  ??</p>
  <p>Is it that only setState variables are available for rendering?</p>
  <p>Here is the code.. I saved var countryname from API data, but when i try to render it, says UNDEFINED</p>
  <p>./src/components/CountryPanel.jsx
  Line 83:49:  'countryname' is not defined  no-undef</p>
  <pre><code>export default function CountryPanel(props) {
    const classes = useStyles();
    
    let countryCode = props.countryCode
  
    let url =
        &quot;https://api.thevirustracker.com/free-api?countryTotal=&quot; + countryCode;
    const [globalData, setGlobalData] = useState({});
    const [countryName, setCountryName] = useState(&quot;&quot;);
      
    useEffect(() =&gt; {
     
      getData(url);
  
      async function getData(url) {
        const response = await fetch(url);
        let data = await response.json(); // convert to json
        const countryname = data.countrydata[0].info.title;
        delete data.countrydata[0].info;
        setCountryName(countryname);
        setGlobalData(data.countrydata[0]);
      }
    }, []);
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;h3&gt;
          Stats for: {countryCode} {countryName} {countryname}
        &lt;/h3&gt;
  </code></pre>
  <blockquote>
  <blockquote>
  <blockquote>
  <p>last of three is UNDEFINED although I saved it from API data
  const countryname = data.countrydata[0].info.title; (..name - n lowercase)</p>
  </blockquote>
  </blockquote>
  </blockquote>