Missing "key" prop for element. (ReactJS and TypeScript) : <p>I am using below code for reactJS and typescript. While executing the commands I  get below error.</p>

<p>I also added the import statement 
import 'bootstrap/dist/css/bootstrap.min.css';
in Index.tsx. </p>

<p>Is there a way to fix this issue?</p>

<pre><code>npm start

client/src/Results.tsx
(32,21): Missing "key" prop for element.
</code></pre>

<p>The file is as below "Results.tsx"</p>

<pre><code>import * as React from 'react';
 class Results extends React.Component&lt;{}, any&gt; {

constructor(props: any) {
    super(props);

    this.state = {
        topics: [],
        isLoading: false
    };
}

componentDidMount() {
    this.setState({isLoading: true});

    fetch('http://localhost:8080/topics')
        .then(response =&gt; response.json())
        .then(data =&gt; this.setState({topics: data, isLoading: false}));
}

render() {
    const {topics, isLoading} = this.state;

    if (isLoading) {
        return &lt;p&gt;Loading...&lt;/p&gt;;
    }

    return (
        &lt;div&gt;
            &lt;h2&gt;Results List&lt;/h2&gt;
            {topics.map((topic: any) =&gt;
                &lt;div className="panel panel-default"&gt;
                    &lt;div className="panel-heading" key={topic.id}&gt;{topic.name}&lt;/div&gt;
                    &lt;div className="panel-body" key={topic.id}&gt;{topic.description}&lt;/div&gt;
                &lt;/div&gt;
            )}
        &lt;/div&gt;
    );
}
}

export default Results;
</code></pre>
