cant return value from function react native

react native function return string
react native function example
how to pass function as props in react native
helper class in react native
functions are not valid as a react child react native
how to call a function in react
react function in child component
react render children with function

im using function that return the length of my array when i print the length of array in console.log its appear but when i return it in view its not show any thing!!!! i dont know why !!! any help please

here is my code

getLengthNationalNumber ()  {

    var all_national_numbers = [];
    db.transaction((tx) => {
        tx.executeSql("select * from service_details where service_name = ? ", [item], (tx, results) => {
            for (let i = 0; i < results.rows.length; i++) {

                let row = results.rows.item(i);
                all_national_numbers[i] = row.national_number;
                length_of_national_number = all_national_numbers.length;

                return (length_of_national_number);

            }

        });
    });

}

in return

<View>
   <Text>{this.getLengthNationalNumber}</Text>
   </View>

You are not calling your function. You would need to do something like:

<View>
   <Text>{this.getLengthNationalNumber()}</Text>
</View>

or you can save the return from the function on the state, call this in componentDidMount, and show the value of the state. E.g:

class MyComponent extends Component {
...
state = {
   length: 0
}

componentDidMount = () => {
  this.getLengthNationalNumber()
}

getLengthNationalNumber ()  {

    var all_national_numbers = [];
    db.transaction((tx) => {
        tx.executeSql("select * from service_details where service_name = ? ", [item], (tx, results) => {
            for (let i = 0; i < results.rows.length; i++) {

                let row = results.rows.item(i);
                all_national_numbers[i] = row.national_number;
                length_of_national_number = all_national_numbers.length;

                this.setState({length: length_of_national_number})
                return (length_of_national_number);

            }

        });
    });

}

in return:

<View>
   <Text>{this.state.length}</Text>
</View>

cant return value from function react native - reactjs - html, getLengthNationalNumber()}</Text> </View> or you can save the return from the function on the state, call this in componentDidMount, and show the value of  Everything defined in the function's body is the render function which returns JSX in the end. Now, if you want to render a React Component inside a Function Component, you define another component and render it as HTML element with JSX within the other component's body: importReact from'react'; functionApp(){.

I think it's better to use state variables

set the state variable in function like

this.setState({variableName : variableValue})

and user the state variable in render function like this

<Text>{this.state.variableName}</Text>

Every state variable set time, your component will going to re-render. And you can write your function directly in componentWillMount or componentDidMount functions.

Undefined return values from native modules in React components , Description Bug - The return value of a native module function is undefined when accessed in a React component. Expected behavior test bool:  Using Function.prototype.bind in render creates a new function each time the component renders, which may have performance implications (see below). Arrow Function in Render class Foo extends Component { handleClick ( ) { console . log ( 'Click happened' ) ; } render ( ) { return < button onClick = { ( ) => this . handleClick ( ) } > Click Me </ button > ; } }

In your code you have missed the parenthesis for the method calling. If you haven't provide the parenthesis it will search for the 'variable'.

<Text>{this.functionName()}</Text>

Component State – React, Pass an updater function instead of an object if you need to compute values read `state` instead of `this.state` when updating. return {count: state.count + 1} })​  value. The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same.

As per your code, db.transaction() looks like a async call, which will return a Promise instead of the number that you need to print.

What you can do is that you can maintain a state variable as in the below example:

constructor(props){
  super(props)
  this.state = {
      len = 0
    }
  this.getLengthNationalNumber = this.getLengthNationalNumber.bind(this)
}

...

getLengthNationalNumber ()  {

var all_national_numbers = [];
db.transaction((tx) => {
    tx.executeSql("select * from service_details where service_name = ? ", [item], (tx, results) => {
        for (let i = 0; i < results.rows.length; i++) {

            let row = results.rows.item(i);
            all_national_numbers[i] = row.national_number;
            length_of_national_number += all_national_numbers.length;

        }
       this.setState({len: length_of_national_number});

    });
  });
}

...

render(){
  return(
  <View>
     <Text>{this.state.len}</Text>
   </View>
  )
}

JSX In Depth – React, This is a component and should have been capitalized:function hello(props) { // Correct! This use of <div> is JSX type can't be an expression. return <​components[props.storyType] When you pass a string literal, its value is HTML-​unescaped. So these two JSX More. TutorialBlogAcknowledgementsReact Native. So in this tutorial we would going to create a react native Android iOS app with 2 functions 1st is Function without Parameter, 2nd is Function with Parameter and we would Calling Function on Button onPress-onClick. Contents in this project Creating & Calling Function From Same Class Tutorial : 1.

I think your problem is that you have to use bind function or use arrow function like this:

getLengthNationalNumber = () => {
    ...
}

and you have return statement inside the for loop, your function is always returned in the first iteration.

Hooks FAQ – React, How to get the previous props or state? Why am I seeing stale props or state inside my function? How to read an often-changing value from useCallback? React DOM; React Native; React DOM Server; React Test Renderer; React Shallow You can't use Hooks inside a class component, but you can definitely mix  React Native Pass TextInput Entered Value From One Activity Screen to Another admin July 28, 2018 July 28, 2018 React Native Transforming data between activities is one of the most useful task in react native applications because using them we can communicate between activities by passing values to one another.

Lifting State Up – React, function BoilingVerdict(props) { if (props.celsius >= 100) { return <p>The water would boil.</p>; } return <p>The It renders an <input> that lets you enter the temperature, and keeps its value in this.state.temperature . We also can't display the BoilingVerdict from Calculator . TutorialBlogAcknowledgements​React Native. One of the most requesting features around React community has been returning multiple elements from a component’s render method. Skipping wrapper tag is definitely something that developers are happy about — popularity of my tweet proves this point. The basic way is to return an array of elements.

React Function Components, Here you will learn React Function Components by example with step by step . just JavaScript Functions being React Components which return JSX (React's the state (value) of the input field and don't let the native HTML element's However, when doing it this way, React Dev Tools cannot identify the  So like before, when React is looking at this view, it is seeing a new function every time. Which in return causes React to re-render. Not exactly what we want to happen.

Connect: Extracting Data with mapStateToProps · React Redux, Your mapStateToProps function should return a plain object that contains objects, or extracting plain JS values from Immutable.js objects). (If you’re hungry for the deep details of Function.prototype.bind), check out this function from JavaScriptCore, the JavaScript Engine used by React Native for both Android and iOS. If you’re really feeling ambitious, you can review a similar function for V8, Google’s JavaScript engine via this snapshot.) OK.

Comments
  • You need to call the function with brackets like this. this.getLengthNationalNumber()
  • @Chandini i tried , same result
  • your function returns a promise, that's why it's not printing the desired result. You need to maintain a state variable, and upon successful completion of db.transaction you need to update that state variable and print the same in your View
  • also in your for loop you're returning in the first iteration itself, not sure if you intend to do that, kindly recheck it.
  • ,, its return the initial value of lengh 0
  • Did you call the function inside DidMount? Also console log something inside the function to check if the value is actually returned correctly
  • Okay can you console.log("function called") inside getLengthNationalNumber and see if it gets hit? And also console log the final value before the return to see if its correct, that you want
  • im tired it with parenthesis ,, same result
  • im tried , same result , it dosent change the value
  • can you share your full code! only thing I can see is that you might not have access to this.setState({len: length_of_national_number}); inside that function, in that case you'll need to bind the function