How can I return two components within the same function in react?

Question

I am working on a react native, and I want to know if there is a way to return two components that belong to the same function. I have the following code:

import React, { useState } from "react";
import { Text, View } from "react-native";

const SaveMessage = ({ FirstMassege }) =>{
return(
   <Text>{FirstMassege}</Text>
) 
}

export const StateContext = React.createContext(null);

const concatMessage = ({ children }) =>{
const [colorless, Setaddcolor] = React.useState([])

statecolor = {
   color : [colorless, Setaddcolor]
}

return (
    <View>
       <SaveMessage title='primera parte del mensaje'/>
    </View>
    <StateContext.Provider value={statecolor}>{children}</StateContext.Provider>
);
}

As you can see, the first component that returns with the message is fine, however, when I want to include the StateContext in the return, it throws me a syntax error. I already tried adding a comma after the View tag. However this causes the component with the message to be replaced by the Context. How can i fix this?

you should be able to wrap the return value in `<> >` \, e.g. `(<>/*...*/>)` — scottysseus, Jun 24 '22 at 20:20

score 1 · Answer 1 · answered Jun 24 '22 at 20:20

You'd want to use a fragment for this. This can be done by using <React.Fragment> or <>.

return (
  <>
    <View>
       <SaveMessage title='primera parte del mensaje'/>
    </View>
    <StateContext.Provider value={statecolor}>{children}</StateContext.Provider>
  </>
)

How can I return two components within the same function in react?

1 Answers1