Home > OS >  How to show or toggle text when I click on button in react native?
How to show or toggle text when I click on button in react native?

Time:09-01

My code is not working, what is wrong with my code? I am trying to create a simple question-answer app, I shared the example of my code below, on the below example how can I hide the Answer by default and show the answer when I click on the button? Thanks for your support.

import React, { useEffect, useState } from "react";
import {View, Text, StyleSheet, Button} from 'react-native'
const Testing = () =>{

  const [showValue, setShowValue] = useState(false);

return (
  <View style={{
    backgroundColor: '#f1f1f1',justifyContent: 'center', alignItems: 'center',}}>

    <Text>1. What is Lorem Ipsum?</Text>
    <Text>
1. dummy 
2. text
3. Ipsum
4. Lorem

</Text>
{showValue? <Text style={{color: 'green', margin: 10,}}>Answer: Lorem</Text> : null}
<Button title="Show Answer" onClick={() => setShowValue(!showValue)} />

</View>

);}
export default Testing;

CodePudding user response:

Replace Your onClick with onPress

onClick used in react js

<Button title="Show Answer" onPress={() => setShowValue(!showValue)} />
  • Related