We Keep Coding

How can we pass data from the main function to the secondary function? React-Native

I want to pass a value from my parent function to my child function.
but I don't know what to do.
please help advice
The language I use is react native. I want to send search data to main function
this is my code
Main Function
export default function Home() {
return (
<View>
<HeaderHome Upload={Upload} Uri={Uri} />
</View>
);
}
Second Function
export default function HeaderHome({ Upload, Uri }) {
const navigation = useNavigation();
const [showScrollView, setShowScrollView] = useState(false);
const [search, setSearch] = useState('');
const onPress = () => {
setShowScrollView(!showScrollView);
};
console.log(search);
return (
<View>
{showScrollView ? (
<View>
<TextInput
placeholder="Search..."
placeholderTextColor="#000"
onChangeText={(e) => setSearch(e)}
/>
<TouchableOpacity onPress={() => onPress()}>
<Text>Cancel</Text>
</TouchableOpacity>
</View>
) : (
<View>
<View>
<Ionicons
name="md-search"
style={styles.iconSearch}
onPress={() => onPress()}
/>
<Ionicons
name="person-circle"
onPress={() => navigation.navigate('Menu', { Upload, Uri })}
/>
</View>
</View>
)}
</View>
);
}

Create a callback function that you pass as a prop from Home to HeaderHome. This could look as follows.
export default function Home() {
const [search, setSearch] = useState('')
return (
<View>
<HeaderHome setHomeSearch={setSearch} Upload={Upload} Uri={Uri} />
</View>
);
}
In HeaderHome you can call that function in the onPress function and set the state search in the Home component as follows.
export default function HeaderHome({ Upload, Uri, setHomeSearch }) {
const navigation = useNavigation();
const [showScrollView, setShowScrollView] = useState(false);
const [search, setSearch] = useState('');
const onPress = () => {
setShowScrollView(!showScrollView);
};
console.log(search);
const onSearchSet = (text) => {
setSearch(text)
setHomeSearch(text)
}
return (
<View>
{showScrollView ? (
<View>
<TextInput
placeholder="Search..."
placeholderTextColor="#000"
onChangeText={(e) => onSearchSet(e)}
/>
<TouchableOpacity onPress={() => onPress()}>
<Text>Cancel</Text>
</TouchableOpacity>
</View>
) : (
<View>
<View>
<Ionicons
name="md-search"
style={styles.iconSearch}
onPress={() => onPress()}
/>
<Ionicons
name="person-circle"
onPress={() => navigation.navigate('Menu', { Upload, Uri })}
/>
</View>
</View>
)}
</View>
);
}

I want to set state of parent component from child component during onChangeText in react native?

Here I want to setName of parent component's state from child component while onCHangeText but it gives me "TypeError: setName is not a function. (In 'setName(text)', 'setName' is undefined)" error
Here is my Parent Component
const ProfileCreationScreen = () => {
const [name, setName] = useState()
const userSignup = async () => {
try {
firestore().collection('users').doc("androiduser_mobile89").set({
name: name,
});
alert("Succesfully Created")
} catch (error) {
alert(error);
}
};
return (
<SafeAreaView>
<Text>Create your account</Text>
<Button
mode="contained"
onPress={() => userSignup()}>
Sign Up
</Button>
<View style={{ display: "none" }}>
<NameScreen setName={setName} />
</View>
</SafeAreaView>
)
}
Here is my child component
export const NameScreen = ({ setName, navigation }) => {
return (
<KeyboardAvoidingView
enabled
behavior="padding"
style={styles.container}>
<View>
<Text style={styles.text}>Full Name</Text>
<TextInput
style={styles.textField}
label="Enter your Full Name"
underlineColor="#FF0074"
outlineColor="red"
value={text}
onChangeText={(text) => setName(text)}
/>
<Button mode="contained" style={styles.btn} onPress={() => alert(text)}>
Next
</Button>
</View>
</KeyboardAvoidingView>
);

React native loading data from async storage returns undefined

I am trying to load data from Async Storage in react-native. I managed to load all User Data from API to async storage and I was able to display it in UserData(), however when I try to return received data to other components I get:
[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "undefined"]
I assumed data is returned asyncroniously so I tried to await it however then I was getting:
[Unhandled promise rejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:]
I searched this error and all I found out was that it assumes I was calling hooks in class. It is not truth however, because I simply used setState() in UserProfile() to save data received from UserData(). Could anyone please tell me what am I doing wrong? Thanks for all the help in advance.
Function I used to retrieve user data from:
import React, { useState } from "react";
import { View, Text } from "react-native";
import storage from "./Storage";
export default function UserData() {
const [userData, setuserData] = useState();
storage
.load({
key: "user",
autoSync: true,
syncInBackground: true,
})
.then(ret => {
setuserData(JSON.stringify(ret.info));
})
.catch(err => {
// console.warn(err.message);
return;
});
if (userData) return userData;
}
Function which displays user profile:
import React, { useState, useEffect } from "react";
import DeleteUser from "./DeleteProfile";
import PayPal from "../navigation/PayPal";
import { Button, TextInput, Text, ScrollView, View, Image } from "react-native";
import Styles from "../../styles/Styles";
import storage from "../elements/Storage";
import UserData from "../elements/GetUserData";
export default function UserProfile() {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [premium, setpremium] = useState(false);
const [admin, setAdmin] = useState(false);
const [id, setId] = useState("");
const [checkout, setCheckout] = useState(false);
const info = UserData();
useEffect(() => {
async function getData() {
const result = JSON.parse(info);
setEmail(result.email);
setName(result.name);
setId(result._id);
setPhone(result.phone);
setpremium(result.premium);
setAdmin(result.admin);
}
getData();
}, []);
return (
<ScrollView style={Styles.userProfile}>
<View style={(Styles.bigBar, { textAlign: "center" })}>
<Text style={Styles.h1}>Profile Page</Text>
</View>
<View style={Styles.profileContent}>
<View>
<Image
style={Styles.profileImg}
source={{
uri: "https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg",
}}
/>
</View>
<View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>User name: </Text>
</View>
</View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>Email: </Text>
</View>
</View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>Phone number: </Text>
</View>
</View>
<View>
{/* {premium && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}>premium: </Text>
</View>
{/* )} */}
</View>
<View>
{/* {!premium && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}> premium: </Text>
<View
style={{
color: "red",
}}
></View>
</View>
{/* )} */}
</View>
{/* {admin && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}>Admin: </Text>
<View style={{ color: "green" }}></View>
</View>
{/* )} */}
</View>
<View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{name}</Text>
</View>
</View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{email}</Text>
</View>
</View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{phone}</Text>
</View>
</View>
<View>
{/* {premium && ( */}
<View style={Styles.profileView2}>
<View style={{ color: "orange" }}>
<Text style={Styles.h6}> POSIADANE</Text>
</View>
<View style={{ marginBottom: 1 }} />
</View>
{/* )} */}
</View>
<View>
{/* {!premium && ( */}
<View style={Styles.profileView2}>
<View
className="inline"
style={{
color: "red",
}}
>
{checkout ? (
<View style={{ margin: 0 }}>
<PayPal />
</View>
) : (
<View style={Styles.smlBtn}>
<Button
style={{ marginLeft: 1, marginBottom: 1 }}
onPress={() => setCheckout(true)}
title="BUY PREMIUM"
/>
</View>
)}
</View>
</View>
{/* )} */}
</View>
{/* {admin && ( */}
<View style={Styles.profileView2}>
<View style={{ color: "green" }}>
<Text style={Styles.h6}> TRUE</Text>
</View>
</View>
{/* )} */}
</View>
</View>
<View>
{/* <DeleteUser id={id} /> */}
{/* <Link
className="rf update better"
to={{
pathname: `/editProfile/?${id}`,
}}
>
UPDATE
</Link> */}
</View>
</ScrollView>
);
}

Okay I figured it out. In order to execute it properly I had to handle Promise returned from UserData() with then. It looks like this in the end:
useEffect(() => {
async function getData() {
await UserData().then(result => {
setEmail(result.email);
setName(result.name);
setId(result._id);
setPhone(result.phone);
setpremium(result.premium);
setAdmin(result.admin);
});
}
getData();
}, []);

How to implement a way to delete an item from a FlatList?

I am not sure how to add a delete function in a FlatList. I know I can make different components, but I want to know how to do it within this one file. I've trying to figure this out for hours, but do not know how to do.
export default function test() {
const [enteredGoal, setEnteredGoal] = useState("");
const [courseGoals, setCourseGoals] = useState([]);
const goalInput = enteredText => {
setEnteredGoal(enteredText);
};
const addGoal = () => {
setCourseGoals(currentGoals => [
...currentGoals,
{ key: Math.random().toString(), value: enteredGoal }
]);
};
const removeGoal = goalId => {
setCourseGoals(currentGoals => {
return currentGoals.filter((goal) => goal.id !== goalId);
})
}
return (
<View style={styles.container}>
<View>
<TextInput
color="lime"
style={styles.placeholderStyle}
placeholder="Type here"
placeholderTextColor="lime"
onChangeText={goalInput}
value={enteredGoal}
/>
</View>
<FlatList
data={courseGoals}
renderItem={itemData => (
<View style={styles.listItem} >
<Text style={{ color: "lime" }}>{itemData.item.value}</Text>
</View>
)}
/>
<View>
<TouchableOpacity>
<Text style={styles.button} onPress={addGoal}>
Add
</Text>
</TouchableOpacity>
</View>
</View>
);
}

You just need to modify your code a bit to handle the delete button. Since you already have delete functionality, call that function when you click the delete button. That's it.
<FlatList
data={courseGoals}
renderItem={itemData => (
<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
<Text style={{ color: "lime" }}>{itemData.item.value}</Text>
<TouchableOpacity onPress={() => removeGoal(itemData.item.key)}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
)}
/>;
EDIT
change your removeGoal function as below
const removeGoal = goalId => {
setCourseGoals(courseGoals => {
return courseGoals.filter(goal => goal.key !== goalId);
});
};
Hope this helps you. Feel free for doubts.

React-Native: Formik ref fails to get value

I have a dummy Login code with formik form in react-native
import React, { Component } from "react";
import {
TextInput,
Text,
Alert,
Image,
View,
TouchableOpacity,
SafeAreaView,
ScrollView
} from "react-native";
import styles from "./Styles/LoginStylesheet";
import { KeyboardAccessoryNavigation } from "react-native-keyboard-accessory";
import { Formik } from "formik";
import schemaObject, { initialValues, refs } from "./Validations/LoginValidations";
export default class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
activeInputIndex: 0
};
}
handleFocus = index => () => {
this.setState({
activeInputIndex: index
});
};
handleFocusNext = () => {
if (this.state.activeInputIndex + 1 >= refs.length) {
return;
}
refs[this.state.activeInputIndex + 1].focus();
};
handleFocusPrevious = () => {
if (this.state.activeInputIndex - 1 < 0) {
return;
}
refs[this.state.activeInputIndex - 1].focus();
};
handleLogin = () => {
console.log("ACTIOn");
// this.formik.handleSubmit();
};
render() {
return (
<View style={styles.safeAreaView}>
<SafeAreaView style={styles.safeAreaView}>
<ScrollView style={styles.superView}>
<Formik {/* LINE 56 */}
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
ref={p => (this.formik = p)}
>
{({
values,
handleChange,
errors,
setFieldTouched,
touched,
isValid,
handleSubmit
}) => (
<View style={styles.superView}>
<View style={styles.logoParentView}>
<Image
source={require("../../Resources/Assets/Login/aptihealth_logo.png")}
resizeMode={"contain"}
style={styles.logo}
/>
</View>
<View style={styles.emailParentView}>
<Text style={styles.titleLabel}>Email Id</Text>
<TextInput
value={values.emailId}
onChangeText={handleChange("emailId")}
onBlur={() => setFieldTouched("emailId")}
placeholder="Email Id"
style={styles.textInput}
autoCorrect={false}
onFocus={this.handleFocus(0)}
ref={input => {
refs[0] = input;
}}
/>
{touched.emailId && errors.emailId && (
<Text style={{ fontSize: 10, color: "red" }}>
{errors.emailId}
</Text>
)}
</View>
<View style={styles.passwordParentView}>
<Text style={styles.titleLabel}>Password</Text>
<TextInput
value={values.password}
onChangeText={handleChange("password")}
placeholder="Password"
onBlur={() => setFieldTouched("password")}
style={styles.textInput}
autoCorrect={false}
secureTextEntry={true}
onFocus={this.handleFocus(1)}
ref={input => {
refs[1] = input;
}}
/>
{touched.password && errors.password && (
<Text style={{ fontSize: 10, color: "red" }}>
{errors.password}
</Text>
)}
</View>
<View style={styles.forgotPasswordParentView}>
<TouchableOpacity
style={styles.forgotpasswordButton}
activeOpacity={0.7}
>
<Text>Forgot Password?</Text>
</TouchableOpacity>
</View>
<View style={styles.loginParentView}>
<TouchableOpacity
onPress={() => {
console.log("VALUES: ", values, this.formik);
this.handleLogin();
}}
style={styles.loginButton}
activeOpacity={0.7}
>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.seperaterParentView}>
<View style={styles.seperaterView} />
<Text style={styles.seperaterText}>OR</Text>
<View style={styles.seperaterView} />
</View>
<View style={styles.faceIdLoginParentView}>
<Image
source={require("../../Resources/Assets/face_id_small_color/face_id_small_color.png")}
resizeMode={"contain"}
/>
<TouchableOpacity style={styles.faceIdButton}>
<Text>Sign In with Face ID</Text>
</TouchableOpacity>
</View>
<View style={styles.signUpParentView}>
<TouchableOpacity style={styles.signupButton}>
<Text>Sign Up for Account Here</Text>
</TouchableOpacity>
</View>
</View>
)}
</Formik>
</ScrollView>
</SafeAreaView>
<KeyboardAccessoryNavigation
nextDisabled={false}
previousDisabled={false}
nextHidden={false}
previousHidden={false}
onNext={this.handleFocusNext}
onPrevious={this.handleFocusPrevious}
avoidKeyboard
/>
</View>
);
}
}
I am trying to console formik ref in login action getting undefined value with debug error
ExceptionsManager.js:126 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `LoginView`.
in Formik (at LoginView.js:56)
I have no idea why it's getting undefined ??

You should take a look at this issue.
You problem is here
<Formik
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
ref={p => (this.formik = p)} {/* passing this ref will throw the error */}
>
In the latest version of Formik, they changed Formik to a functional component as explained in the issue, which gives you this error if you pass ref's.
You can check for the suggestions on the issue or wait until they release an update with the correction.
Edit:
Formik made an update and now you can use ref with the prop innerRef.
Please see this comment
You should change it to
<Formik
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
{/* using innerRef instead of ref*/}
innerRef={p => (this.formik = p)} {/* this will give you the formik bag */}
>
And this way you can call this.formik.handleSubmit(), just lik you want to do.