CODEWITHSUNDEEP
javascriptreact-nativereduxcomponentsparent-child
Dr oscar
Dr oscar

Reputation: 415

How to send function with value to child component React?

Actually in my React native App i have a problem sending a id value from a Parent view to a child component in the Logout function, i don't knon how send the value into the function; actually i have the next console errors:

Warning: Cannot update a component from inside the function body of a different component.
And
TypeError: null is not an object (evaluating 'users.current.id')

My resum code is the next (Home is parent, GeneralHeader is child):

Home.tsx (I can see printed the correct string value (users.current.id) in console)

import React from 'react'
import {Text, Container, Content, View} from 'native-base'
import Styles from './Styles/HomeStyles'
import {connect} from 'react-redux'
import GeneralHeader from '../Components/GeneralHeader'
import {Auth} from '../Services/Auth/AuthService'

const Home =(props) => {
   const {navigation, users} = props;

   return(
    <Container >
        {console.log(users.current.id)}
        <GeneralHeader backButton={false} moreButton={true} title={"Home"} logoutFunc={Logout(users.current.id)}/>
        <Content >      
            <View style={Styles.content}>                  
                <Text>Hola {users.current.id}</Text>
            </View>
        </Content>
     </Container>
    );

  async function Logout(id:string){
    await Auth.LogoutUser(id, props);
    navigation.navigate('Login');
  }
}

const mapStateToProps=(state)=>{
  const {users} = state;
  return {users};
}

export default connect(mapStateToProps)(Home);

GeneralHeader.tsx

import React, {useState} from 'react'
import {Button, Header, Body, Title, Left, Right, Icon, Card, CardItem, Text, Fab} from 'native-base'


const GeneralHeader=(props)=>{
    const {backButton, title, moreButton, logoutFunc} = props;
    return(
     <>
        <Header>
            {
                backButton===true ? 
                <Left>
                    <Button transparent>
                        <Icon name='arrow-back' />
                    </Button>
                </Left>
                :null
            }              
            <Body>
                <Title>{title}</Title>
            </Body>
            {
                moreButton===true? 
                <Right>
                    <Button transparent onPress={()=> logoutFunc}>
                        <Icon name='menu' />
                    </Button>        
                </Right>
                :null
            }
        </Header>
     </>
    );
 }

 export default GeneralHeader;

Upvotes: 0

Views: 143

Answers (2)

Ezequiel S. Sandoval
Ezequiel S. Sandoval

Reputation: 170

edited

I've never used react native, but i've tried with react. Idk why would you want to do this but if you want to handle this beahaviour i would recommend to use a function that returns a function... something like:

If ECMA script 6 syntax is allowed:

const handleLogout = (id:string) => async () => {
  await Auth.LogoutUser(id, props);
  navigation.navigate('Login');
};
...

Home.tsx remains the same

<GeneralHeader backButton={false} moreButton={true} title={"Home"} logoutFunc={handleLogout(users.current.id)}/>

GeneralHeader.tsx changes to

<Button transparent onPress={logoutFunc}>
  <Icon name='menu' />
</Button>

Let me know if this works!

Upvotes: 0

WebEXP0528
WebEXP0528

Reputation: 601

const Logout = (id:string)=>async ()=>{
    await Auth.LogoutUser(id, props);
    navigation.navigate('Login');
}

<Button transparent onPress={logoutFunc}>

Upvotes: 0

Related Questions