title: How to pass variable in index.html to react components
body: <p>I am making a project using Django and React. I fetch the data from Twitter API from Django and I want to show the data in frontend.
  I pass the data from django views.py to index.html as a javascript variable. Then I want to present it in the Landing.js in Components folder. I used React router and I Landing and Main page are pages that I am routing to so far. I have not figured out how to pass the data from a single html file to Javascript components in React</p>
  
  <p>Thanks in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- index.html --&gt;
  &lt;section class="section"&gt;
      &lt;div class="container"&gt;
            &lt;div id="app" class="columns"&gt;&lt;!-- React --&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;script type="text/javascript"&gt;
      window.myVar = "{{context.near.text}}";
      //data can be passed from the Django.views.py
      
    &lt;/script&gt;
  
    {% load static %}
    &lt;script src="{% static 'frontend/main.js' %}"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Landing.js js components
  import React, { Component } from 'react';
  
  class Landing extends Component {
      componentDidMount() {
          console.log(window.myVar); //undefined
          console.log(this.myVVar); //undefined
          
          
      }
      
      render(){
          return (
              &lt;div&gt;
  
                  
                  
              &lt;/div&gt;
          )
      }
  }
  
  export default Landing;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/gb2Sq.png" rel="nofollow noreferrer">This is my tree structure</a></p>
  
  <p><a href="https://i.stack.imgur.c" rel="nofollow noreferrer">this is context I pass from Django views.py</a></p>
  
  <p><a href="https://i.stack.imgur.com/0QuFt.png" rel="nofollow noreferrer">this is a variable I want to pass to "LANDING" components</a><a href="https://i.stack.imgur.com/l1WJo.png" rel="nofollow noreferrer">This is "Landing.js" components I want to show the variables</a></p>