<p dir="auto">Very often we have code that uses <code class="notranslate">transferPropsTo</code>, but it's very heavy handed. Often times we just want to add a class or some style based on an option.</p>
<p dir="auto">Currently if we want to do that it looks something like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var joinClasses = require('joinClasses');
// ...
var MyComponent = React.createClass({
  render: function() {
    return &lt;div className={joinClasses(this.props.className, &quot;something&quot;)} /&gt;
  }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">joinClasses</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'joinClasses'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// ...</span>
<span class="pl-k">var</span> <span class="pl-v">MyComponent</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">joinClasses</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">,</span> <span class="pl-s">"something"</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">While it's not too bad once, we sometimes do this with <code class="notranslate">style</code> as well. And longer classnames. Multiply by a large number and we're in a situation that adds a lot of duplicate work for developers.</p>
<p dir="auto">So we want to make this better. Some of us talked about a few different ideas here, but we want a combination of explicit and not too much magic. One idea was a magical prop that could be used to pass through.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return &lt;div props={{className: this.props.className}} className=&quot;something&quot; /&gt;"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">props</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span><span class="pl-c1">className</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"something"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">On the surface this looks great, but then we need to bake knowledge of certain props into composite components (is it a string?) and we're not guaranteed that the component is using a prop in the same way it's used in the DOM.</p>
<p dir="auto">So what we settled on for the least surprising is in line with some of the special casing React does for some DOM properties. Right now we have booleans which get handled specially. What we're planning is the ability to special case arrays. This allows us to do this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="return &lt;div className={[this.props.className, &quot;something&quot;]} /&gt;"><pre class="notranslate"><span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">,</span> <span class="pl-s">"something"</span><span class="pl-kos">]</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">We would need to do this for individual properties and not apply the same handling for every property. For example, <code class="notranslate">className</code> would basically need to flatten and then join with a space. style would need to flatten and merge all objects.</p>
<p dir="auto">This will diverge slightly from our current behavior of just stringifying <del>all</del>most properties.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
This is a feature request.</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
There doesn't appear to be a way to pass context when calling <code class="notranslate">renderer.create</code></p>
<p dir="auto">I'm attempting to use snapshot testing in Jest with a component that uses <code class="notranslate">react-intl</code>. If I could provide context, I could create a similar <a href="https://github.com/yahoo/react-intl/wiki/Testing-with-React-Intl#helper-function-1">helper function to those for enzyme</a>.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Be able to provide a context, similar to <code class="notranslate">shallowRenderer.render</code>: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="70193073" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/3721" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/3721/hovercard" href="https://github.com/facebook/react/issues/3721">#3721</a></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">I'm using React 15.13.2 and haven't tried any previous versions of React.</p>