CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
Medloks
Medloks

Reputation: 33

Change state from custom button in React Native

I'm just starting at React native and i want to update the state from my home page with a click on a custom button. I made this code juste bellow. When I click on my buttons, i can't see the state change.

const Home = () => {
  const welcomeSentence =
    "Bonjour, est ce que tu as fais ton workout aujourd'hui ?";
    const [isWorkoutDone, setIsWorkoutDone] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.homePageText}>{welcomeSentence}</Text>
      <View style={styles.buttonContainer}>
        <AppButton title ="OUI" onPress={()=>this.setIsWorkoutDone(true)}/>
        <AppButton title ="NON" onPress={()=>this.setIsWorkoutDone(false)}/>
      </View>
      <Text>{isWorkoutDone ? "OK" : "KO"}</Text>
    </View>
  );
};

With this code on my cutom button :

const AppButton = (props) => {
  return (
    <Button
      title={props.title}
      onPress={props.onPress}
      style={styles.appButton}
    />
  );
};

I tested and make search but I didn't find why my state didn't change.

Upvotes: 2

Views: 261

Answers (1)

Someone Special
Someone Special

Reputation: 13588

You are using functional component so you don't need this.

   <AppButton title ="OUI" onPress={()=>setIsWorkoutDone(true)}/>
   <AppButton title ="NON" onPress={()=>setIsWorkoutDone(false)}/>

Upvotes: 2

Related Questions