title: ReactJS passing custom components to a grid
body: <p>I'm creating a grid(data table) component. It works like that:</p>
  <pre><code>const gridOptions = {
      columnDefinitions: [
          {title: 'Test1', component: &lt;ExampleColumnComponent /&gt;},
          {title: 'Test2', component: &lt;Example2ColumnComponent /&gt;},
      ]
  }
  
  &lt;Grid options = {gridOptions} /&gt;
  </code></pre>
  <p>Inside Grid component:</p>
  <pre><code>records.map((row) =&gt; (
      &lt;TableRow key={row.id}&gt;
      {
          props.options.columnDefinitions.map((column, index) =&gt; {
          return (
              &lt;TableCell key={index} &gt;
                  {column.component}
              &lt;/TableCell&gt;);
          })
      &lt;/TableRow&gt;))
  </code></pre>
  <p>Inside Grid component i have map which renders components and it work if I don't pass any props to the child components.</p>
  <pre><code>export const ExampleColumnComponent = () =&gt;{
      return (&lt;div&gt;TEST lalalalala&lt;/div&gt;);
  }
  </code></pre>
  <p>But when I use props here it doesn't work:</p>
  <pre><code>export const ExampleColumnComponent = (props) =&gt;{
      return (&lt;div&gt;{props.row}&lt;/div&gt;);
  }
  </code></pre>
  <p>I got a lot of react errors on the runtime such as:</p>
  <blockquote>
  <p>React.createElement: type is invalid -- expected a string (for
  built-in components) or a class/function (for composite components)
  but got: . Did you accidentally export a JSX
  literal instead of a component</p>
  <p>Warning: Can't perform a React state update on an unmounted component.
  This is a no-op, but it indicates a memory leak in your application.
  To fix, cancel all subscriptions and asynchronous tasks in a useEffect
  cleanup function.</p>
  </blockquote>
  <p>I don't know how to pass this row object to the child component inside Grid component and make this work?</p>