title: How do I send props from one component to another component, outside the render?
body: <p><strong>Subject:</strong>  I'm coding a login system.</p>
  
  <p><strong>Language or library:</strong> React (16.8)</p>
  
  <p><strong>Problem</strong>: I have a component called LoginControl. Within this component, I want to access another component (outside the render) . Then I want to send the username to the other component with the help of props.</p>
  
  <hr>
  
  <p><strong>LoginSystem.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import Welcome from "./Welcome"
  
  class LoginControl extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        users: [
          { username:"code", password:"blogger" },
          { username:"true", password:"codes" },
          { username:"furkan", password:"gulsen" }
        ]
      }
    }
  
    Control = () =&gt; {
      var username = document.getElementById("username");
      var password = document.getElementById("password");
  
      this.state.users.map( (user) =&gt; {
        if(user.username == username.value &amp;&amp; user.password == password.value){
          &lt;Welcome uName={user.username} /&gt; // problem
          // props --&gt; Welcome
        }
      })
    };
  
    render(){
      return(
        &lt;div&gt;
        &lt;button className="btn btn-success" onClick={this.Control}&gt;Sign In&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default LoginControl;
  </code></pre>
  
  <hr>
  
  <p><strong>Welcome.jsx</strong></p>
  
  <pre><code>import React from 'react'
  
  const Welcome = (props) =&gt; {
    return(
      &lt;h2&gt;WELCOME {props.uName}&lt;/h2&gt;
    )
  }
  
  export default Welcome;
  </code></pre>
  
  <blockquote>
    <p><strong>Error:</strong> Expected an assignment or function call and instead saw an expression  no-unused-expressions</p>
  </blockquote>