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

Question

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

Answer 1

Using the below syntax would be easier to work with.

Parent

Check the name of the prop you are passing down to the child. In your given code, you are passing data.

const  Main: React.FC = () => {

  ...

  return (
    <Box flex = {1} >
        <Navbar/>
        <SubHeader/>
        <OrgsList data = {orgsData}/> // <- Passing "data" as prop name.
        <Footer/>
    </Box>
  );
}

export default Main;

Child

1. In Props, declare the prop name and type you want. We declare "data" here.
2. Then in Child Component, use the prop directly by destructuring.

import Orgs from '../api/interfaces'

interface Props {
  data: Orgs[] // <-- Prop name should be "data"
}

export const OrgList: React.FC<Props> = ({data}) => {
  // const data = props; <-- DELETE - data is extracted directly above

  // Tip: You can rename "data" by changing ({data}) to ({data: renamedData})
  //      above. Note that "renamedData" is NOT a Type!
  //      (Refer to "Assigning to new variables names and providing default values"
  //      in the given link for "destructuring".)


  return (
    <Center>
      ...
    </Center>
  );
}

Answer 2

Change child line from:

const data = props;

To instead say:

const data = props.data:

This is because you called it "data" when you passed it to the component in your line:

Had you instead said banana={orgsData} then child component would have referred to it as props.banana.