title: most concise way to pass props to a react component?
body: <p>here is my react hooks code.</p>
  <pre class="lang-js prettyprint-override"><code>function onClick(){
    alert('clicked')
  }
  var className='clicker'
  function Clicker1(){
    return &lt;div {...{onClick,className}}&gt;clicker 1&lt;/div&gt;
  }
  function Clicker2(){
    var props={onClick,className}
    return &lt;div {...props}&gt;clicker 2&lt;/div&gt;
  }
  function Clicker3(){
    return &lt;div className={className} onClick={onClick}&gt;clicker 3&lt;/div&gt;
  }
  function Clickers(){
    return &lt;&gt;&lt;Clicker1/&gt;&lt;Clicker2/&gt;&lt;Clicker3/&gt;&lt;/&gt;
  }
  ReactDOM.render(&lt;Clickers/&gt;,document.getElementById('root'));
  </code></pre>
  
  <p>It demonstrates three different styles of passing props to a component. They all work just fine. My favorite style is clicker 1.</p>
  <p>my question is: is there a more concise way to pass the props?</p>
  <p>edit: this question is not option-based, its about concise representation, which can be accurately measured in number of characters, no option needed</p>