React native - Function 调用不执行任何操作

Question

Very new to react native and javascript... I am trying to call a function and it doesn't seem to do anything.

Here is the fragment of code where the function is called:

<View style={styles.rows}>
   <renderButtons/>  //the function I want to call
   <TouchableOpacity style={styles.interest_button} onPress={SettingsHandler}>
      <Text>{"  testdumdum  "}</Text>
   </TouchableOpacity>   //test to ensure nothing is wrong w function itself
</View>

and there is the function I want to call:

const renderButtons = () => {
   return (
      <TouchableOpacity style={styles.interest_button} onPress={SettingsHandler}>
         <Text>{"  testsmartsmart  "}</Text>
      </TouchableOpacity>
   );
}

Only the container "testdumdum" appears, and I don't know why since the function does basically the same thing for now.

What should I do to fix this?

Answer 1

You need to start your component with a capital letter:

Note: Always start component names with a capital letter.

docs

so change renderButtons to RenderButtons