Question 34879 in React native Question posted in
The official React Native documentation can be found here.

How to show text when I click on button in react native?

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?

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

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

    <Text>1. In which of the following languages is function overloading not possible?</Text>
    <Text>
1. C 
2. C++
3. Java
4. Python
</Text>
<Text>Answer: C</Text>
<Button title="Show Answer"/>

<Text>2.What is Lorem Ipsum?</Text>
    <Text>
1. Lorem
2. Ipsum
3. dummy
4. text
</Text>
<Text>Answer: Lorem</Text>
<Button title="Show Answer"/>
</View>

);}
export default Testing;
Tags:

3

Answers


  1. 0

    Add state showAnswer, conditional render and button click event handler

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

const [showAnswer, setShowAnswer] = useState(false);

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

    <Text>1. In which of the following languages is function overloading not possible?</Text>
    <Text>
1. C 
2. C++
3. Java
4. Python
</Text>
<Text>Answer: C</Text>
<Button title="Show Answer"/>

<Text>2.What is Lorem Ipsum?</Text>
    <Text>
1. Lorem
2. Ipsum
3. dummy
4. text
</Text>
{showAnswer && <Text>Answer: Lorem</Text>}
<Button title="Show Answer" onClick={() => setShowAnswer(prev => !prev)} />
</View>

);}

export default Testing;
    Login or Signup to reply.
  2. 0

    To achieve this effect I recommend you use a state with a boolean type, so true or false

    Like this:

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

    then on the area where you want the text to render use a Ternary Operator

    {showValue? <Text>Answer: Lorem</Text> : null}

    When the showValue state is true React will render out the text

    then give the button an OnClick()
    Like so

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

    Which will toggle the state between true and false

    Login or Signup to reply.
  3. 0

    One way of doing this is to have each pair of question and answer as component:

    <Text>Answer: C</Text>
<Button title="Show Answer"/>

    and the component would look something like this

    import React, { useState } from "react";
const Answer = ({ answerText }) => {

   const [showAnswer, setShowAnswer] = useState(false);
   return (
     {showAnswer ? <Text>{answerText}</Text> : ""}
 
     <Button onClick={()=>setShowAnswer(!showAnswer)} 
     title={showAnswer ? "Click to hide" : "Click to show"}/>
   );}

export default Answer;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search