Right. I've been googling for days and can't seem to find an example that works and that I understand.

I've currently got three components, ButtonComponent, SecondButton, and TextComponent.

I already have it such that tapping Button can update State and thus change the text in TextComponent (if i set setState to the text string on line 39).

How can I change it so that it will change to a string of text that I can set from the button itself rather than the function fired by the button, so that SecondButton can fire the same function as Button, but update the text to something different.

I figure it must be a small tweak to onPress? but everything I try keeps complaining about objects and things being undefined.

Thanks.

import { setStatusBarNetworkActivityIndicatorVisible, StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';


function ButtonComponent({changeText}) {
  console.log(`2. ${changeText} from inside Button Component`)
  return(
    <Button title="change text" onPress={changeText} />
  )

}

function SecondButton({changeText}){
  return(
  <Button title="change text again" onPress={changeText} />
  )
}

function TextComponent({text}) {
  console.log(`3. ${text} from inside Text Component`) //
  return (
    <View>
      <Text style={styles.text}>{text}</Text>
    </View>
  )
}

export default function App() {
console.log('1 .start')

const [text, setText] = useState('default text'); // declared in the screen

const changeText = ({newtext}) => {
    setText(newtext)
    console.log(`4. ${text} just after changeText`)
  }

  return(
   <View style={styles.container}>
     <ButtonComponent changeText={changeText}/>
     <SecondButton changeText={changeText}/>
      <TextComponent text={text}/>
    </View>
  )
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: 'red',
  }
});

CodePudding user response：

function SecondButton({changeText}){
  return(
  <Button 
    title="change text again" 
    onPress={() => changeText( { newtext: "different string" })}
  />
  )
}