I'm new in the typescript and iam tryng to pass data between to components, and i don't have any idea how to do this in typescript
my father component
const Main: React.FC = () => { const [orgsData, setOrgsData] = useState<Array<Orgs>>([]) useEffect(() => { loadOrgs() },[]) const loadOrgs = () =>{ Services.getOrgs() .then(response =>{ setOrgsData(response.data) console.log(response.data) }) .catch(e =>{ console.log(e) }) } return (<Box flex = {1} ><Navbar/><SubHeader/><OrgsList data = {orgsData}/><Footer/></Box> );}export default Main;
my child component
import Orgs from '../api/interfaces'interface OrgList { data: Orgs[]}export default function OrgList(props: OrgList) { const data = props; return (<Center><Box><Flex flexDirection="column"> {data.map((item) => ( <Box padding={3} w={350} h='auto' borderRadius={14} backgroundColor="#ffffff" shadow={1}><Flex flexDirection='row'><Box><Image alt = '' borderRadius={6} w={50} h={50} source={ReactIcon} /></Box><Flex flexDirection='column'><Box marginLeft={2}><Heading fontSize={16} color="#2196f3" fontWeight={500}> {item.login}</Heading><Heading fontSize={16} color="#636363" fontWeight={400} overflow='hidden'> React website and its localizations</Heading></Box></Flex></Flex><Flex flexDirection='row' justifyContent='flex-end'><Button marginTop={3} padding={2} size='sm' borderRadius={16} backgroundColor='#91CBF9' startIcon={<Icon as={<SalvoAzul />} size='sm'></Icon> }><Text textAlign='center' color='#2196f3'> Salvar</Text></Button></Flex></Box> ))}</Flex></Box></Center> );}
When i try to map my props return this error
Property 'map' does not exist on type 'OrgList'
I'm new in the typescript and i don't have any idea how to pass data between this components