Passing state from child component to the App component to be renders , in React Native

user_3542531 0
Viewed 240

I am trying to pass a state that has been stored in useState hook in child component to the parent component which is the app.js i have create onPress event to pass the state to the prop that i have passed from the app,js, put when i press the function not working at all, here is the code

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { RoundedButton } from '../../src/components/RoundedButton';

export function Focus({ addSubject }) {
  const [title, setTitle] = useState(null);

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>what do you want to fucos on ? </Text>
        <View style={styles.inputComtainer}>
          <TextInput
            style={styles.input}
            onSubmitEditing={({ nativeEvent }) => {
              setTitle(nativeEvent.text);
            }}
          />
          <RoundedButton
            title="+"
            size={60}
            onPress={() => {
              addSubject(title);
            }}
          />
        </View>
      </View>
    </View>
  );
}

and this the the app.js code

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { RoundedButton } from './src/components/RoundedButton';
import { Focus } from './src/features/Focus';

export default function App() {
  const [focusSubject, setfocusSubject] = useState(null);

  function reciveTitle(sendTitle) {
    setfocusSubject(sendTitle);
  }

  return (
    <View style={styles.container}>
      {focusSubject ? (
        <Text> {focusSubject}</Text>
      ) : (
        <Focus addSubject={setfocusSubject} />
      )}
    </View>
  );
}
react-props use-state react-native reactjs javascript
2 Answers

Instead of passing function(reciveTitle) you are passing state function(setfocusSubject)

export default function App() {
  const [focusSubject, setfocusSubject] = useState(null);

  function reciveTitle(sendTitle) {
    setfocusSubject(sendTitle);
  }

  return (
    <View style={styles.container}>
      {focusSubject ? (
        <Text> {focusSubject}</Text>
      ) : (
        <Focus addSubject={reciveTitle} />  // pass reciveTitle function 
      )}
    </View>
  );
}
user_65444600

Hey so i think it's a minor issue, When you use a {} it returns undefined by default and the addSubject(title) would've run regardless. To be able to see your function being called you'd have to return it as so:

import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { TextInput } from 'react-native-paper';
import { RoundedButton } from '../../src/components/RoundedButton';

export function Focus({ addSubject }) {
  const [title, setTitle] = useState(null);

  return (
    <View style={styles.container}>
      <View style={styles.titleContainer}>
        <Text style={styles.title}>what do you want to fucos on ? </Text>
        <View style={styles.inputComtainer}>
          <TextInput
            style={styles.input}
            onSubmitEditing={({ nativeEvent }) => {
              setTitle(nativeEvent.text);
            }}
          />
          <RoundedButton
            title="+"
            size={60}
            onPress={() => {
              return addSubject(title);
            }}
          />
        </View>
      </View>
    </View>
  );
}

Or you could use an explicit return like onPress={() => addSubject(title)} this way you can get the value returned inside your Parent component.

user_106925390
Related