How to pass several props in spread operator in react : <p>I have the following:</p>

<pre><code>let objA = {varA,varB};
let objB = {varC, varD};
</code></pre>

<p>I'd like to pass varA,varB,varC,varD to my component, but not one by one because the number of variables inside objA and objB should be unknown.</p>

<p>I've read in react docs that this is possible with spread operator:</p>

<pre><code>let bothObjects = {...arrA, ...arrB};
&lt;Component {...bothObjects} /&gt;
</code></pre>

<p>But is it possible to do without the third object?</p>

<p>This works:</p>

<pre><code>&lt;Component {...objA} {...objB} /&gt;
</code></pre>

<p>But I'm not sure it's correct...
This also works:</p>

<pre><code>&lt;Component {...{...objA,...objB}} /&gt;
</code></pre>

<p>But it looks funny and I don't fully understand this.</p>

<p>This, however, <strong>does not work</strong>:</p>

<pre><code>&lt;Component {...objA, ...objB} /&gt;
</code></pre>

<p>and I'm not sure why... because it worked when I initialized 'bothObjects' above... It also looks to my like the proper way to do it intuitively.</p>

<p>Where am I mistaking?  </p>
