title: Reactjs, Typescript - property does not exist on child component
body: <p>I'm using typescript 2.3.4 with React. I'm getting the error TS2339: error TS2339: Property 'name' does not exist on type 'Readonly&lt;{ children?: ReactNode; }> &amp; Readonly&lt;{}>'. The error happens when I try to declare the property in a child component. How do I reference the property, properly in the child component?</p>
  
  <p>For some reason the code is not executing in script runner.</p>
  
  <p>any help is appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export interface person {
      name: string;
      age: number;
  }
  
  interface State {
      personArray: person[];
  }
  
  interface Props {
  
  }
  
  
  class ProfileData extends React.Component&lt;{}, person&gt; {
      public render() {
          return (
              &lt;section&gt;
                  &lt;section&gt;
                      &lt;h3&gt;profile 1&lt;/h3&gt;
                      &lt;div&gt;{this.props.name}&lt;/div&gt;
                  &lt;/section&gt;
              &lt;/section&gt;
          )
  
      }
  }
  
  export class Profile extends React.Component&lt;Props, State&gt; {
      public state: State;
      public props: Props;
      constructor(props: Props){
          super(props);
              this.state = {
                  personArray: [
                      {
                          name: 'bazaaa', 
                          age: 42
                      },
                      {
                          name: 'louis', 
                          age: 24
                      }
                  ]
              };
      }
  
      public render() {
          let profile1 = this.state.personArray[0];
          return (
              &lt;ProfileData 
              name={profile1.name}
              /&gt;
          )
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>