Array map not working in react native view. Text strings must be rendered within a <Text> component

Question

I have been struggling with this code for a while now. I tried using array map to display content in react native view but keeps throwing errors which I already handled.

function AppSlim() {
  //const todos = useSelector(state=>state.TodoList).list; 
  const todos = ['Hello', 'Michael']
  console.log('slim todos',todos);
  return (
    <View style={styles.container}>
      
      <MyBtn />
      <MyModal />
      <View>
        {/* {alert("hi")} */}
        {console.log('todos',todos)}
        {todos.map((item)=>(<Text key={item}>{item}</Text>))};
        {/* <Text>Hi</Text>
        <Text>Mike</Text> */}
        
      </View>
    </View>
  );
}

I have been battling with this issue for quite some time and I can't see what is wrong with my code. And I get the error:

Text strings must be rendered within a <Text> component.

What I'm I missing please?

Tim · Accepted Answer · 2020-03-27 10:46:04Z

2

The error occurs due to the semicolon after the closing curly bracket. The App tries to render the ; as Text, but it's missing the <Text> Component for it.

Change this:

{todos.map((item)=>(<Text key={item}>{item}</Text>))};

To:

{todos.map((item)=>(<Text key={item}>{item}</Text>))}

Demo:

https://snack.expo.io/rJw5K8oL8

answered Mar 27, 2020 at 10:46

Tim

10.7k4 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asad · Accepted Answer · 2020-03-27 10:51:29Z

0

try this code Don't forget to return the mapped array, like:

 return todos.map((data) => {
          return (
            <View><Text key={item}>{item}</Text></View>
          )
        })

Reference for the map() method: link

answered Mar 27, 2020 at 10:51

Asad

5733 silver badges16 bronze badges

1 Comment

Tim Over a year ago

That's not the problem.

Collectives™ on Stack Overflow

Array map not working in react native view. Text strings must be rendered within a <Text> component

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related