title: How to automate check variable existence in react?
body: <p>I have react components which render variables through props.</p>
  
  <p><strong>main.jsx</strong></p>
  
  <pre><code>&lt;div&gt;
     {props.name &amp;&amp; &lt;h1&gt;{props.name}&lt;/h1&gt;}
     {props.id &amp;&amp; &lt;h1&gt;{props.id}&lt;/h1&gt;}
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>personal.jsx</strong></p>
  
  <pre><code>&lt;div&gt;
     {props.city &amp;&amp; &lt;h1&gt;{props.city}&lt;/h1&gt;}
     {props.country &amp;&amp; &lt;h1&gt;{props.country}&lt;/h1&gt;}
  &lt;/div&gt;
  </code></pre>
  
  <p>the same files repeated in in multiple looks whose styles are different.</p>
  
  <p>The structure look likes.</p>
  
  <pre><code>--Card-1
    --main.jsx
    --personal.jsx
  --Card-2
    --main.jsx
    --personal.jsx
  --Card-3
    --main.jsx
    --personal.jsx
  --Card-4
    --main.jsx
    --personal.jsx
  </code></pre>
  
  <p>This may increase in future. I want to check/automate script to check <code>name and id</code> exits in evary main.js and <code>city and country</code> exist in every personal.jsx file</p>