Send value to function in React-Native

Question

I am trying to send value of TextInput to another Class Function in console.log. My approach is when the button is pressed the value FromStr in TextInput will got passed into another class function. Here's my code

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
import receiveMessage from "./receiveMessage"

export default class WeatherProject extends Component{

  constructor (props) {
    super(props);

    this.state={
        From:'',
        FromStr:'',
    }
  }

 changeText=(From)=>{
  this.setState({From})
 }
 changeText1=(To)=>{
  this.setState({To})
 }
 onPress = ()=>{
  this.setState({FromStr: this.state.From})
  receiveMessage.receiveMessage();
 }

render(){
return (
<View>
    <View style={styles.inputFields}>
    <TextInput placeholder="From" id="from" style={styles.fromField} onChangeText={this.changeText} />
  <View style={styles.buttonStyle}>
  <Button
      title={"Go Back"}
      color="#f194ff"
      onPress={this.onPress}
  ></Button>
 </View>
    </View>
      </View>

);
}
}

receiveMessage.js

import React, { Component } from "react";
export default class receiveMessage extends Component {

        static receiveMessage=()=>{
        console.log(this.state.FromStr)
      }
  }

receiveMessage isn't a valid react component name, it should be PascalCased. What is the relationship between WeatherProject and ReceiveMessage? Parent-child? Siblings? In react data typically flows in one direction, down the tree from parent to children. Callbacks allow data to passed back up the tree though. — Drew Reese
– Drew Reese, Commented Jan 29, 2020 at 7:30
If you are working in React Native try passing the data to another component by using props. check out great tutorial here : reactjs.org/docs/components-and-props.html — Ravi Singh
– Ravi Singh, Commented Jan 29, 2020 at 9:00
@RaviSingh i cant compare it with my code. Can you help me in this solution — SukhiX07
– SukhiX07, Commented Feb 1, 2020 at 9:59

Zain Ul Abideen · Accepted Answer · 2020-01-29 07:42:26Z

1

React does not allow to pass the data between react components in this way.

Following is way to pass the data between components in React. To get more insights please follow

import React, { Component } from 'react';

class WeatherProject extends Component {
   render() {
    const messageToPassed = 'Hello';
    return (
      <div>
        <ReceiveMessage message={messageToPassed} />
     </div>
    );
   }
}

const ReceiveMessage = props => <h1>{props.message}</h1>;
export default App;

answered Jan 29, 2020 at 7:42

Zain Ul Abideen

1,6122 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Singh · Accepted Answer · 2020-02-01 12:45:35Z

0

here we pass the value from sidemenu component by raising an event

App.js

class App extends React.Component {
handleSubmit = (e, data) => console.log(`my data from props`, data);
render() {
    return (
            <Sidemenu 
              onSubmit={(e, data)=>this.handleSubmit(e, data)} />
      );
  }
}

SideMenu.js

const Sidemenu = props => {
const { onSubmit} = props;
    return (
            <button onClick={(e, type)=>this.onSubmit(e, 'mydata')} />
      );
}

answered Feb 1, 2020 at 12:45

Ravi Singh

1,1391 gold badge12 silver badges25 bronze badges

Collectives™ on Stack Overflow

Send value to function in React-Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related