title: React TypeScript how to iterate through an object?
body: <p>This is specific for React.</p>
  
  <p>I have an object like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>interface Profile {
      name: string;
      title: string;
  }
  
  const NewPerson: Profile = {
      name: "John Smith",
      title: "Software Engineer"
  }
  </code></pre>
  
  <p>And I'd like to return the key - value pair of that object in a React component like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>function MyFunc() {
    return (
     &lt;div&gt;
      {
        Object.keys(NewPerson).map((key) =&gt; (
          &lt;div&gt;{key}: {NewPerson[key]}&lt;/div&gt;
        ))
       }
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>However, I can access they <code>key</code> but not its value. I have this error:</p>
  
  <blockquote>
    <p>TS: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Profile'.
      No index signature with a parameter of type 'string' was found on type 'Profile'.</p>
  </blockquote>
  
  <p>I've tried to use <code>Object.values</code> and <code>filter</code> but cannot fix it.</p>