title: Are there any eslint rules that could prevent `Objects are not valid as a React child`
body: <p>I'm writing React with Typescript and, after making a change to my code, I started seeing <code>Objects are not valid as a React child</code> errors.</p>
  <p>I had changed a property from a <code>string</code> to an <code>Optional&lt;string&gt;</code>, so the error totally makes sense since my <code>&lt;div&gt;{property}&lt;/div&gt;</code> code was no longer correct.</p>
  <p>So, this is a type error being caught at runtime.</p>
  <p>I'm not doing any casting or any other code &quot;tricks&quot; to try to subvert pre-existing type checking; I'm just rendering a value that React detects at runtime to be an object.</p>
  <p>It seems to me that an appropriate linting rule or typescript configuration should have been able to capture that <code>property</code> is no a valid React child.</p>
  <p>Here's a very simple example (<a href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQoksiK62eMAIgPICycREuUocAtABMStOnRgBPMFjgAFYmHQBeOAG86cfXCwAPZOAA2WAFzaAvnRv06uCADtU8AGIQIcLQAptY1MwCxtLFTVUAEpfAD44AB5xYAA3WMCTcywbBIB6ZLSZdnweXgA6ShdxLCg-BK8fIKyNbQCbKJtc2IAaSVwAVxAsFxgygCMIcTkooA" rel="nofollow noreferrer">TSPlayground</a>):</p>
  <pre><code>type Props = {
      example:{}
  };
  
  const Foo = ({example}: Props) =&gt; &lt;div&gt;{example}&lt;/div&gt;
  </code></pre>
  <p>I would expect an error pointing to the use of <code>example</code> inside the JSX.</p>
  <p>I've been doing some googling, but I can't find a rule that seems like it would catch this.</p>
  <p>Is there one that anyone knows of?</p>