javascript - Show button and text in react native - Stack Overflow

admin管理员组

文章数量:1424668

I tried to code in react native today and tried to write a program with a button and a text that changes with every press:

import { Text, View, StyleSheet, TouchableOpacity, Button, TextInput } from 'react-native';
import Constants from 'expo-constants';


export default () => {

const onButton = () =>
{
  myResult(10);
}

return (
  <Text>Hello World</Text>  

  <Button
  onPress={onButton}
  title="Click Here to calculate"
  color="black"
  />
)
}

It gives me this error:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

If I ment the text class or the button class like that: //<Text>Hello World</Text> the other class would work.

Any suggestions?

I tried to code in react native today and tried to write a program with a button and a text that changes with every press:

import { Text, View, StyleSheet, TouchableOpacity, Button, TextInput } from 'react-native';
import Constants from 'expo-constants';


export default () => {

const onButton = () =>
{
  myResult(10);
}

return (
  <Text>Hello World</Text>  

  <Button
  onPress={onButton}
  title="Click Here to calculate"
  color="black"
  />
)
}

It gives me this error:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

If I ment the text class or the button class like that: //<Text>Hello World</Text> the other class would work.

Any suggestions?

• javascript
• react-native
• expo

Share Improve this question Follow asked Jan 6, 2021 at 20:41 CheeseBurgerCheeseBurger 4722 silver badges55 bronze badges 2

• 1 The error message that you quote is very explicit about both what the problem is, and how to fix it. Could you expand on which part of it you don't understand? – Robin Zigmond Commented Jan 6, 2021 at 20:45
• Besides the two answers below, I think you'll also need to replace onPress={onButton}by onPress={()=>{onButton()}}, otherwise your function will be called even before the button is clicked. – Maf Commented Jan 6, 2021 at 23:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can't render multiple ponent like that. Like the error message said, you have to wrap them in an enclosing tag.

<View>
    <Text>Hello World</Text>  

    <Button
      onPress={onButton}
      title="Click Here to calculate"
      color="black"
    />
</View>

You are returning 2 ponents, in react you must return just one ponent, so your code you could wrapping in two ways:

<View>
    <Text>Hello World</Text>  

    <Button
      onPress={onButton}
      title="Click Here to calculate"
      color="black"
    />
</View>

Or using Fragment ponent of react that will no add a node in your ponent tree

//You can use Fragment as <></> or <React.Fragment></React.Fragment>
<>
    <Text>Hello World</Text>  

    <Button
      onPress={onButton}
      title="Click Here to calculate"
      color="black"
    />
</>

The best option is to wrap it in a <View> tag, as mentioned in the other two answers.

---

Here is a fun solution, you can even return an array.

Example:

return [
        <Text>Hello World</Text>, 
        <Button 
           onPress={onButton}
           title="Click Here to calculate"
           color="black" 
        />
];

本文标签： javascriptShow button and text in react nativeStack Overflow