Can't render a simple react native element on screen?

Question

I have a React-Native ternary operator inside of a map function and it won't render the results on the screen even though I can successfully console log from the exact location of the code.

The CSS DOES have width and height!

• I tried Console log from the location of the comment in the code with positive results.
• I tried replacing the code with just a .
• I tried using many different libraries to do exactly what I'm trying and even got this code from an extremely popular stackoverflow.

but nothing works

       <View>
            <Text>{questions[this.state.questionIndex].question}</Text>
            {questions[this.state.questionIndex].radios.map((text, key) => {
              <View key={key}>
                {console.log(text, key)}
                {this.state.checked == key ? (
                  <TouchableOpacity style={styles.btn} key={key}>
                    <Image style={styles.img} source={unselected} />
                    <Text>{text}</Text>
                  </TouchableOpacity>
                ) : (
                  <View key={key + 1}>
                    <TouchableOpacity
                      key={key}
                      onPress={() => {
                        this.setState({ checked: key });
                      }}
                      style={styles.btn}
                    >
                      <Image style={styles.img} source={selected} key={key + 2} />
                      <Text key={key + 3}>{text}</Text>
                    </TouchableOpacity>
                  </View>
                )}
                {this.props.showInput === key ? (
                  <TextInput
                    placeholder={this.props.placeholder}
                    ediable={true}
                    style={
                      this.props.inputSize === "small"
                        ? styles.inputSmall
                        : styles.inputLarge
                    }
                  />
                ) : null}
                }
              </View>;
            })}
</View>

I expect something to render from the location of the comment

I also made a new component based on someone's reply to this post; didn't work either: ` import React, { Component } from "react"; import { StyleSheet, Text, View, Dimensions, TextInput, TouchableOpacity, Image } from "react-native";

     const unselected = require("./img/rb_unselected.png");
     const selected = require("./img/rb_selected.png");

     export default class Questionnaire extends Component {
       state = {
         checked: false
       };

        render() {
          {

   this.props.questions[this.props.questionIndex].radios.map((text, 
     key) => {
             return (
                 <View key={key}>
                  {console.log(
                   text,
                   key,

         this.props.questions[this.props.questionIndex].radios
                   )}
                   {this.state.checked == key ? (
                    <TouchableOpacity style={styles.btn} key={key}>
                       <Image style={styles.img} source= 
       {unselected} />
                       <Text>{text}</Text>
                    </TouchableOpacity>
                  ) : (
                    <View key={key + 1}>
                       <TouchableOpacity
                        key={key}
                        onPress={() => {
                        this.setState({ checked: key });
                        }}
                        style={styles.btn}
                       >
                        <Image style={styles.img} source={selected} 
        key={key + 2} />
                          <Text key={key + 3}>{text}</Text>
                        </TouchableOpacity>
                     </View>
                   )}
                   {this.props.showInput === key ? (
                    <TextInput
                        placeholder={this.props.placeholder}
                       ediable={true}
                       style={
                        this.props.inputSize === "small"
                           ? styles.inputSmall
                            : styles.inputLarge
                         }
                        />
                    ) : null}
                    }
                 </View>
                );
              });
             }
          }
        }

         const styles = StyleSheet.create({
           container: {
           flex: 1,
           backgroundColor: "#F5FCFF"
           },

           nextButton: {},

            invalidNextButton: {},

            backButton: {},

            img: {
             height: 100,
             width: 100
             },

            btn: {
              flexDirection: "row",
              backgroundColor: "green"
          }
          });

`

Answer 1

Try returning the code inside the map function.

<View>
    <Text>{questions[this.state.questionIndex].question}</Text>
    {questions[this.state.questionIndex].radios.map((text, key) => {
       return(
           <View key={key}>
               {console.log(text, key)}
               {this.state.checked == key ? (
                   <TouchableOpacity style={styles.btn} key={key}>
                       <Image style={styles.img} source={unselected} />
                       <Text>{text}</Text>
                   </TouchableOpacity>
               ) : (
                   <View key={key + 1}>
                       <TouchableOpacity
                           key={key}
                           onPress={() => {this.setState({ checked: key });}}
                           style={styles.btn} >
                           <Image style={styles.img} source={selected} key={key + 2} />
                           <Text key={key + 3}>{text}</Text>
                       </TouchableOpacity>
                   </View>
               )}
               {this.props.showInput === key ? (
                   <TextInput
                       placeholder={this.props.placeholder}
                       ediable={true}
                       style={
                           this.props.inputSize === "small"
                           ? styles.inputSmall
                           : styles.inputLarge } />
               ) : null }
           </View>
       )
   })}
</View>