title: Manipulating other elements on condition true, Reactjs jsx
body: <p>I have a mapping loop on select options. On condition true, one option gets selected. Now i want one element out of select tag to have a class "check" if condition is true.</p>
  
  <pre><code>&lt;div className="select-style"&gt;
      &lt;select&gt;
          {xarray.map((heading, index) =&gt; 
              {return heading.headingis.toLowerCase().indexOf('earning') != -1 ?
                  &lt;option value="{heading.headingis}" key={index} selected&gt;{heading.headingis}&lt;/option&gt;
                  :
                  &lt;option value="{heading.headingis}" key={index}&gt;{heading.headingis}&lt;/option&gt;
              }
         )}                                                 
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;div className="mapping-check"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/WH3f8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WH3f8.png" alt="enter image description here"></a></p>
  
  <ol>
  <li>If condition <code>1</code> is true, <code>2</code> should have class "mapping-check". Else no class.</li>
  </ol>
  
  <p><strong>EDIT:</strong> There are multiple dropdowns and each will have a <strong>check div</strong>.</p>
  
  <p><a href="https://i.stack.imgur.com/g6ojC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6ojC.png" alt="enter image description here"></a></p>
  
  <p>How would I achieve this?</p>