Struggling with rendering a list in React using Typescript.
I'm new to Typescript and unsure how to properly pass props from App.tsx to Technology.tsx
- Vue JS
- Node JS
- Angular JS
- React JS
Technology.tsx
import React from 'react';
export type State = {
id: number;
name:string;
}
const Technology: React.FC <State[]> = ({id,name}) => {
return (
<div >
<h2 key={id}>{name}</h2>
</div>
);
}
export default Technology;
App.tsx
import React,{Fragment, useState} from 'react';
import Technology from './components/Technology'
export type State = {
id: number;
name:string;
}
const App: React.FC = () => {
const [items, setItems] = useState <State[]>([
{id:2 , name: ' Vue JS' },
{id:3 , name: ' Node JS'},
{id:4 , name: ' Angular JS'},
{id:1 , name: ' React JS'}
])
return (
<Fragment>
<h1>List of technologies</h1>
{items.map(item=>(
<Technology
technology= {item}
/>
))}
</Fragment>
);
}
export default App;