Ok so imagine we got some simple program that changes text in a parent based on a button press in the child

​

Parent.js:

const [displayText, setDisplayText] = useState("Button not clicked") 

export default function Parent(){
<View>
    <Text>{displayText}</Text>
    <Child />
</View>
}


Child.js:

export default function Child(){
    const [isClicked, setIsClicked] = useState(false)
    <View>
        <Button
        text="Click to change display text"
        onPress={() => {setIsClicked(true)}
        />
    </View>
}

​

In this example the parent needs to know the state of isClicked from the child component to change a value of the display text in the parent component. It seems the ethos of React is to build this sort of modular code where everything is in as small blocks as possible. But the information flow seems to really only want to go one way. I know you can technically pass a function from the child to the parent but it seems kinda hacky. Why isn't there like an offical streamlined way for a parent to be passed back up data from a child component so it can do something with that?