Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How pass data between component father to child in react native with typescript

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>