Pass data between components in React Native-CodePudding

I've been reading the documentation and searching code here, but I can't find anything that helps me.

The idea is to change the email and password values when onChange is triggered so then it will be possible to retrieve that same data from App.js but I can't find any simple example of how this works using functional components.

After reading docs/inet seems like ReactNative has been changing a lot.

Here is my Form.js component:

import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from './styles';

const Form = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <View styles={styles.container}>
      <Text style={styles.inputLabel}>Email</Text>
      <TextInput
        placeholder="Email"
        onChangeText={email => setEmail(email)}
        style={styles.input}
        value={email}
      />
      <Text style={styles.inputLabel}>Password</Text>
      <TextInput
        secureTextEntry={true}
        placeholder="Password"
        onChangeText={password => setPassword(password)}
        style={styles.input}
        value={password}
      />
    </View>
  );
};

export default Form;

And my App.js component

import React from 'react';
import {View, Button} from 'react-native';
import styles from './styles';
import Form from './Form';
import Greeting from './Greeting';
import Terms from './Terms';

const handleButton = data => {
  console.log(data);
};

const App = () => {
  return (
    <View style={styles.container}>
      <Greeting />
      <Form />
      <Terms />
      <View style={{marginTop: 35}}>
        <Button
          onPress={() => handleButton(Form['email'])}
          style={styles.confirmBtn}
          title="Crear cuenta"
        />
      </View>
    </View>
  );
};

export default App;

CodePudding user response：

Since Form.js is the child component of the App.js you need to initialise the state in App.js and pass the setState function to Form.js like below

App.js

import React, {useState} from 'react';
import {View, Button} from 'react-native';
import styles from './styles';
import Form from './Form';
import Greeting from './Greeting';
import Terms from './Terms';

const App = () => {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleButton = data => {
    console.log(email);
  };

  return (
    <View style={styles.container}>
      <Greeting />
      <Form setEmail={(e)=>setEmail(e)} setPassword={(p)=>setPassword(p)} />
      <Terms />
      <View style={{marginTop: 35}}>
        <Button
          onPress={() => handleButton()}
          style={styles.confirmBtn}
          title="Crear cuenta"
        />
      </View>
    </View>
  );
};

export default App;

Form.js

import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from './styles';

const Form = ({setEmail,setPassword}) => {

  return (
    <View styles={styles.container}>
      <Text style={styles.inputLabel}>Email</Text>
      <TextInput
        placeholder="Email"
        onChangeText={email => setEmail(email)}
        style={styles.input}
        value={email}
      />
      <Text style={styles.inputLabel}>Password</Text>
      <TextInput
        secureTextEntry={true}
        placeholder="Password"
        onChangeText={password => setPassword(password)}
        style={styles.input}
        value={password}
      />
    </View>
  );
};

export default Form;