We Keep Coding

How to send a function to child component?

I want to know how I can send a function from my parent component to my child component. Because every time I get the error '"validationFunction" is not a function'. Very need your help. Also I will extend my SigIn component and add there another validation functions, so this is very important to me
SignIn component
import React, { Component } from 'react'
import { View } from 'react-native'
import { MyButton, MyTextInput, Header } from '../uikit'
import { styles } from '../constants/constants'
import { LOG_IN } from '../routes'
import { isEnoughSymbols } from '../validation/isEnoughSymbols'
export class SignIn extends Component {
state = {
symbolsValidation: true
}
isEnoughSymbols = (text) => {
if (text.trim().length < 8)
this.setState({ symbolsValidation: false })
}
render() {
const { mainContainer, buttons } = styles
return (
<View>
<View style={mainContainer}>
<MyTextInput
placeholder={'Email/Login'}
isSecure={false}
errorText={"Incorrect email format!"}
/>
<MyTextInput
placeholder={'Password'}
isSecure={true}
errorText={'Password must contain at least 8 symbols!'}
validationFunction={this.isEnoughSymbols.bind(this)}
/>
<MyTextInput
placeholder={'Confirm password'}
isSecure={true}
errorText={"Passwords don't match"}
/>
<View style={buttons}>
<MyButton
name={'confirm'.toUpperCase()}
onPress={() => this.props.navigation.navigate(LOG_IN)} />
</View>
</View>
</View>
)
}
}
And MyTextInput component
import React, {Component} from 'react'
import { TextInput, View, StyleSheet } from 'react-native'
import { w, width, h } from '../constants/constants'
import { ErrorMessage } from '.'
//import { isEnoughSymbols } from '../validation/isEnoughSymbols'
const MyTextInput = ({ placeholder, isSecure, errorText, validationFunction }) => {
let isValid = true
return (
<View style={styles.container}>
<TextInput
style={styles.text}
placeholder={placeholder}
secureTextEntry={isSecure}
onEndEditing={(e) => validationFunction(e.nativeEvent.text)}
>
</TextInput>
{
isValid ? null : <ErrorMessage
errorText={errorText}
/>
}
</View>
)
}
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-start'
},
text: {
borderBottomWidth: 1,
borderColor: 'black',
fontSize: 30,
width: w - w / 10,
alignSelf: 'center',
textAlign: 'left',
marginTop: 20,
color: 'black'
},
}
)
export { MyTextInput }

undefined is not an object (evaluating 'item.Title') in React Native

So I was making this movie browser project in which I had to fetch data from OMDb API(http://www.omdbapi.com/) and display the data in a Flatlist component.
Although I managed to display 10 results of every movie searched for(as API return 10 items on every call), I added a button that would run a function to send a request again to the API using the page parameter, fetch 10 more results and concatenate the results to the movies.
But as soon as I press the button and run the function, this error appears undefined is not an object (evaluating 'item.Title').
This is my code for the Home Component => Home.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, FlatList, TouchableHighlight, Image, Button} from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import { fetchMovies } from "../api/api";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "",
movies: null,
};
}
//update search text
componentDidUpdate(prevState) {
if (this.state.text !== prevState.text) {
this.getSearch(this.state.text);
}
}
//get search results from fetchMovies
getSearch = async text => {
const results = await fetchMovies(text)
this.setState({ movies: results });
};
////////////////////////////Function making API call using the page parameter///////////
//loading more movies
handleLoadMore = async() => {
try {
const page = Math.trunc(this.state.movies.length / 10) + 1;
const res = await fetchMovies(this.state.text, page);
this.setState(prevState => ({
movies: prevState.movies.concat(res.movies)
}))
}catch(err){
console.log(err.message);
}
}
//////////////////////////////////////////////////////////
//movie title and poster to render in the flatlist
movieCard = ({ item }) => {
return (
<TouchableHighlight
style={styles.movieCard}
underlayColor="white"
onPress={() => {
this.props.navigation.navigate("Details", {
title: item.title,
id: item.imdbID
});
}}
>
<View>
<Image
style={styles.movieImage}
source={ {uri: item.Poster} }
/>
<View style={{alignItems: 'center'}}>
<Text style={styles.movieTitle}>{item.Title} ({item.Year})</Text>
</View>
</View>
</TouchableHighlight>
);
};
render() {
return(
<View style={styles.container}>
<TextInput
style={styles.searchBox}
autoCorrect={false}
autoCapitalize='none'
autoFocus maxLength={45}
placeholder='Search'
onChangeText={(text) => this.setState({ text })}
value={this.state.text}
/>
{this.state.movies ?
<FlatList
style={styles.movieList}
data={this.state.movies}
renderItem={this.movieCard}
keyExtractor={item => item.Title + item.imdbID}
/>
:
<Text
style={{
alignSelf: 'center',
paddingTop: 150,
justifyContent: 'center',
color: '#8a8787',
fontStyle: 'italic' }}>
search for a movie above...
</Text>
}
<Button
onPress={this.handleLoadMore}
title="Load More"
color="#841584"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#DDD',
alignItems: 'center',
},
searchBox: {
fontSize: 20,
fontWeight: '300',
padding: 10,
width: '100%',
backgroundColor: 'white',
borderRadius: 10,
marginBottom: 30
},
movieList: {
flex: 1,
marginHorizontal: 30,
},
movieCard: {
flex: 1,
margin: 5,
padding: 5,
},
movieImage: {
width: '100%',
height: 350,
borderRadius: 10,
alignSelf: 'center',
},
movieTitle: {
marginTop: 10,
fontSize: 20,
color: '#333'
}
});
This is the code for api functions => api.js
const API_KEY = "API_KEY";
//fetch search data from omdb api
export const fetchMovies = async (response, page) => {
const url = `http://www.omdbapi.com/?apikey=${API_KEY}&s=${response}`;
try {
let response = await fetch(url);
if(page) {
response = await fetch(url + `&page=${page}`)
}
const { Search } = await response.json();
return Search;
} catch (err) {
return console.log(err);
}
};
//fetch ID from omdb api
export const fetchById = async id => {
const url = `http://www.omdbapi.com/?apikey=${API_KEY}&i=${id}`;
try {
const response = await fetch(url);
const results = await response.json();
return results;
} catch (err) {
return console.log(err);
}
};
I know solution to this is probably simple but being new to react-native I am not able to figure it out.

regarding FlatList, In docs they apparently pass lambda which returns rendered items to renderItem prop
Also your initialized state.movies is null and i think it should be an empty array
this.state = {
text: "",
movies: [],
};
<FlatList
style={styles.movieList}
data={this.state.movies}
renderItem={({item}) => this.movieCard({item})}
keyExtractor={item => item.Title + item.imdbID}

Change state in other component in React Native

I'm quite new to React-Native.
I have a screen which will render depends on its current state like below. At default (initial state) it will render the login screen.
App.js
import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Header } from './components/Export';
import LoginBox from './components/LoginBox';
import AdditionalActivity from './components/AdditionalActivity';
import SignUp from './components/SignUp';
export default class App extends Component {
state = {
status: 'initial'
}
renderBasedOnLoggedInState() {
if(this.state.status == 'initial') {
return (
<View>
<Header headerText="APP NAME"/>
<LoginBox/>
<AdditionalActivity />
</View>
);
} else if (this.state.status == 'logged') {
return (
<View>
<Text>Welcome to my application</Text>
</View>
)
} else {
return (
<View>
<Header headerText="APP NAME"/>
<SignUp/>
<AdditionalActivity />
</View>
)
}
}
render() {
return (
<View>
{this.renderBasedOnLoggedInState()}
</View>
);
}
}
When the login below is successed, I need to change the state of component App from "initial" to "logged". How could I do it? The login function here is only for test purpose so don't care much about it XD.
LoginBox.js
import React, { Component } from 'react'
import { Alert, Text, View, TouchableOpacity, Button } from 'react-native'
import GreyTextbox from './GreyTextbox'
export default class LoginBox extends Component {
state = {
username: '',
password: '',
}
Login()
{
var username = this.state.username;
var password = this.state.password;
var userdata = require('./a.json');
var count = 0;
for (let j = 0; j < 2; j++) {
if ((userdata[j].username == username) && ( userdata[j].password == password))
{
Alert.alert("true");
count++;
}
}
if(count == 0)
{
Alert.alert("false");
}
}
render() {
return (
<View style={styles.containerStyle}>
<GreyTextbox
secureOption={false}
placeholder="username"
value={this.state.username}
onChangeText={username => this.setState({username})}
/>
<GreyTextbox
secureOption={true}
placeholder="password"
value={this.state.password}
onChangeText={password => this.setState({password})}
/>
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.Login.bind(this)} > >
<Text style={styles.textStyle}>Log In</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = {
containerStyle: {
//flex: 0.35,
height: 180,
justifyContent: 'space-between',
marginTop: 40,
marginLeft: 30,
marginRight: 30,
position: 'relative'
},
buttonStyle: {
borderWidth: 1,
borderColor: '#3da8ff',
alignContent: 'center',
justifyContent: 'center',
marginLeft: 25,
marginRight: 25,
paddingTop: 5,
paddingBottom: 5,
},
textStyle: {
color: '#3da8ff',
alignSelf: 'center',
fontSize: 20
}
}

Create a method which changes the state and pass it down to the child component as prop.
export default class App extends Component {
constructor(props) {
super(props)
this.state = {status: 'initial'}
this.changeState = this.changeState.bind(this)
}
changeState() {
this.setState({
status: 'logged'
})
}
render() {
return (
<View>
<Header headerText="APP NAME"/>
<LoginBox changeState = {this.changeState}/>
<AdditionalActivity />
</View>
}
}
And in your LoginBox.js you can call it from props:
class LoginBox extends Component {
constructor(props) {
super(props);
this.login = this.login.bind(this);
}
login() {
this.props.changeState;
}
render() {
return (
{...}
<TouchableOpacity
style={styles.buttonStyle}
onPress={this.login} > >
<Text style={styles.textStyle}>Log In</Text>
</TouchableOpacity>
)
}
}
Another useful tip: Never bind functions in your render method!

react native: how to store complete state and all it's props using AsyncStorage

I have a Reminder Component with a simple form comprising of one TextInput from react-native and one DatePicker from native-base and one submit to store the value on click.
I am trying to implement AyncStorage to store those values locally and later display them on another screen. But I am unable to do so, as I am getting an error 'Value is not defined.'
Whatever blog posts and tuts, the person was storing only one single property. I want to store complete state i.e input field and the date onclick of the save button.
This is my ReminderComponent
import React, { Component } from 'react';
import { View,StyleSheet, AsyncStorage, TextInput } from 'react-native';
import {
Form,
Button, Icon,
DatePicker, Text
} from 'native-base';
import PropTypes from 'prop-types';
class Reminder extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
chosenDate: new Date(),
};
this.setDate = this.setDate.bind(this);
this.handleChangeInput = this.handleChangeInput.bind(this);
this.saveData = this.saveData.bind(this);
}
setDate(newDate) {
this.setState({
chosenDate: newDate
});
}
handleChangeInput = (text) => {
this.setState({input:text});
}
//On application loads, this will get the already saved data and set
//the state true when it's true.
componentDidMount() {
AsyncStorage.getItem("key").then((value) => {
this.setState({'key':value});
});
}
//save the input
saveData(value) {
console.log('value', value);
AsyncStorage.setItem("key", value);
this.setState({'key':value});
}
render() {
const {input} = this.state;
return (
<View>
<Form style={styles.formContainer}>
<View style={styles.formView}>
< TextInput
placeholder = "Set your reminder"
onChangeText={this.handleChangeInput}
value={this.state.input}
/>
<DatePicker
defaultDate={new Date()}
minimumDate={new Date(2018, 1, 1)}
maximumDate={new Date(2019, 12, 31)}
locale={"en"}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
placeHolderText="Select date"
textStyle={{ color: "green" }}
placeHolderTextStyle={{ color: "#d3d3d3" }}
onDateChange={this.setDate}
/>
<Text style={styles.datePicker}>
{this.state.chosenDate.toString().substr(4, 12)}
</Text>
</View>
<View style={styles.footer}>
<Button block success style={styles.saveBtn}
onPress={ () =>
{this.saveData()
console.log('save data', value);}
}
>
<Icon type='MaterialIcons' name='done' />
</Button>
</View>
</Form>
</View>
);
}
}
const styles = StyleSheet.create({
formContainer: {
marginTop: 10,
padding: 10,
},
editIcon:{
color: '#28F1A6',
fontSize: 26,
},
editBtn:{
flex: 1,
alignSelf: 'flex-end',
},
datePicker:{
alignSelf: 'auto',
paddingLeft: 10
},
footer:{
position: 'relative',
top: 350
},
saveBtn: {
position:'relative',
marginTop: 35,
}
});
export default Reminder;
This is my ReminderScreen.
import React, { Component } from 'react';
import { View, StatusBar } from 'react-native';
import PropTypes from 'prop-types';
import Reminder from '../components/Reminder';
const ReminderScreen = ({navigation}) => (
<View >
<Reminder navigation={navigation} >
<StatusBar backgroundColor = "#28F1A6" />
</Reminder >
</View>
);
Reminder.propTypes = {
navigation: PropTypes.object.isRequired
}
export default ReminderScreen;

Some tweaks needed in the saveData function and get items from Asyncstorage.
While storing the data in AsyncStorage just convert entire state as a string and save it. For retrieving just convert the string to JSON object and set the value in setState function.
Please see the modified code below for Remainder component.
import React, { Component } from 'react';
import { View,StyleSheet, AsyncStorage, TextInput } from 'react-native';
import {
Form,
Button, Icon,
DatePicker, Text
} from 'native-base';
import PropTypes from 'prop-types';
class Reminder extends Component {
constructor(props) {
super(props);
this.state = {
input: '',
chosenDate: new Date(),
};
this.setDate = this.setDate.bind(this);
this.handleChangeInput = this.handleChangeInput.bind(this);
this.saveData = this.saveData.bind(this);
}
setDate(newDate) {
this.setState({
chosenDate: newDate
});
}
handleChangeInput = (text) => {
this.setState({input:text});
}
//On application loads, this will get the already saved data and set
//the state true when it's true.
componentDidMount() {
AsyncStorage.getItem("key").then((value) => {
this.setState(JSON.parse(value));
});
}
//save the input
saveData() {
AsyncStorage.setItem("key", JSON.stringify(this.state));
}
render() {
const {input} = this.state;
return (
<View>
<Form style={styles.formContainer}>
<View style={styles.formView}>
< TextInput
placeholder = "Set your reminder"
onChangeText={this.handleChangeInput}
value={this.state.input}
/>
<DatePicker
defaultDate={new Date()}
minimumDate={new Date(2018, 1, 1)}
maximumDate={new Date(2019, 12, 31)}
locale={"en"}
timeZoneOffsetInMinutes={undefined}
modalTransparent={false}
animationType={"fade"}
androidMode={"default"}
placeHolderText="Select date"
textStyle={{ color: "green" }}
placeHolderTextStyle={{ color: "#d3d3d3" }}
onDateChange={this.setDate}
/>
<Text style={styles.datePicker}>
{this.state.chosenDate.toString().substr(4, 12)}
</Text>
</View>
<View style={styles.footer}>
<Button block success style={styles.saveBtn}
onPress={ () =>
{this.saveData()
console.log('save data', value);}
}
>
<Icon type='MaterialIcons' name='done' />
</Button>
</View>
</Form>
</View>
);
}
}
const styles = StyleSheet.create({
formContainer: {
marginTop: 10,
padding: 10,
},
editIcon:{
color: '#28F1A6',
fontSize: 26,
},
editBtn:{
flex: 1,
alignSelf: 'flex-end',
},
datePicker:{
alignSelf: 'auto',
paddingLeft: 10
},
footer:{
position: 'relative',
top: 350
},
saveBtn: {
position:'relative',
marginTop: 35,
}
});
export default Reminder;

Children not rendering on state change

I'm working on an app in React-Native and I am trying to render a component with children. If I use the component directly it functions 100% as expected, but if I return it from a conditional(switch) statement it doesn't render children. However the logic is functioning properly because I can actually see the state change.
I have it working 100% properly via conditional usage in another component, but it won't work in this particular case. It's imported correctly because the button renders, but without the child text inside of it, thus displaying just the button with no label text.
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import firebase from 'firebase';
import { LoginForm } from './components/LoginForm';
import { Header, Button, Spinner } from './components/common';
class App extends Component {
state = { loggedIn: null };
componentWillMount() {
firebase.initializeApp({
apiKey: 'nope',
authDomain: 'nope',
databaseURL: 'nope',
projectId: 'nope',
storageBucket: 'nope',
messagingSenderId: 'nope'
});
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ loggedIn: true });
} else {
this.setState({ loggedIn: false });
}
});
}
renderContent() {
switch (this.state.loggedIn) {
case true:
return (
<Button onPress={() => firebase.auth().signOut()}>
Log Out
</Button>
);
case false:
return <LoginForm />;
default:
return <Spinner size="large" />;
}
}
render() {
return (
<View>
<Header headerText="Authentication" />
{this.renderContent()}
</View>
);
}
}
export default App;
Button.js
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
const styles = {
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
},
textStyle: {
alignSelf: 'center',
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
}
};
export { Button };
The state change is in fact working properly, as I can see the state change, but when the button is rendered it does not render the child text "Log Out".
If I use the Log Out directly in the main render method it displays fine, but when I call it via the renderContent() method it does not display the "Log Out" text.

You should pass in the button text as a prop instead of as a child.
renderContent() {
switch (this.state.loggedIn) {
case true:
return <Button onPress={() => firebase.auth().signOut()} btnText="Log Out" />;
case false:
return <LoginForm />;
default:
return <Spinner size="large" />;
}
}
Button.js
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
const Button = ({ onPress, children }) => {
const { buttonStyle, textStyle } = styles;
return (
<TouchableOpacity onPress={onPress} style={buttonStyle}>
<Text style={textStyle}>
{this.props.btnText}
</Text>
</TouchableOpacity>
);
};
const styles = {
buttonStyle: {
flex: 1,
alignSelf: 'stretch',
backgroundColor: '#fff',
borderRadius: 5,
borderWidth: 1,
borderColor: '#007aff',
marginLeft: 5,
marginRight: 5
},
textStyle: {
alignSelf: 'center',
color: '#007aff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10
}
};
export { Button };