title: React js Typescript string array variable
body: <p>I have the following two components. I think I'm having trouble properly declaring my array object to match the interface I've declared. Why do I get the following error on all my properties?</p>
  
  <blockquote>
    <p>[0] (10,5): error TS2304: Cannot find name 'color'.<br>
    [0] (11,5): error TS2304: Cannot find name 'id'.</p>
  </blockquote>
  
  <p>app.tsx</p>
  
  <pre><code>import * as React from "react";
  import * as ReactDOM from "react-dom";
  
  const cars = [
      { id: 1, make: "Make1",  year: 2016, color: "black" },
      { id: 2, make: "Make2",  year: 2006, color: "gray" },
      { id: 3, make: "Make3",  year: 2012, color: "purple" },
  ];
  
  ReactDOM.render(&lt;CarTool cars={cars} /&gt;, document.querySelector("main"));
  </code></pre>
  
  <p>Car Component</p>
  
  <pre><code>import * as React from "react";    
  import * as ReactDOM from "react-dom";
  
  interface CarProps {
      cars: string[];
  }    
  
  export class Car extends React.Component&lt;CarProps, void&gt; {
      public render() {
          return &lt;div&gt;
              &lt;h1&gt;Car Tool&lt;/h1&gt;
              &lt;table&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;td&gt;Make&lt;/td&gt;
                          &lt;td&gt;Year&lt;/td&gt;
                          &lt;td&gt;Color&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {this.props.cars.map((car) =&gt; &lt;tr&gt;&lt;td&gt;car.make&lt;/td&gt;&lt;/tr&gt;)}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;;
      }
  }
  </code></pre>