CODEWITHSUNDEEP
javascriptreact-native
oijafoijf asnjksdjn
oijafoijf asnjksdjn

Reputation: 1225

how to String to React Native Component

const text = "Test Text";
      text = text + <Text style={styles.text2}>Test Text2</Text>;
      text = text + <Image source={this.testImage} />;
      text = text +  "Test"

If this String value is ReactNative Checking with <Text> {text} </ Text>

Test Text [obejct Object] [object Object] Test How do I make [object Object] a real component?

'Test Text${<Text>1</Text>}'

I've tried this, but it's the same.

'Test Text <Text>1</Text>'

This is looks : Test Text <Text> 1 </ Text>

Upvotes: 0

Views: 5627

Answers (1)

Dennis
Dennis

Reputation: 939

You don't have to make it a string and try to concatenate components, instead make it one big JSX node:

const text = <>
    Test Text
    <Text style={styles.text2}>Test Text2</Text>
    <Image source={this.testImage} />
    Test
</>;

If you want to have the flexibility of dynamically adding content, you can store that in variables as well and use a conditional to decide the content, e.g:

const textComponent = (myEvaluator) ?     <Text style={styles.text2}>Test Text2</Text> : <></>;
const imageComponent = (userHasImage) ? <Image source={this.testImage} /> : <></>;

const text = <>
    Test Text
    {textComponent}
    {imageComponent}
    Test
</>;

If you are making a user component of sorts, you could for example control it with the props. Something like this:

const UserProfile = ({user}) => {

    return (

        <div>
            <p>Username: {user.username}</p>
            <p>First name: {user.first_name}</p>
            <p>Last Name: {user.last_name}</p>
            {user.picture && <Image src={user.picture.src} />}
        </div>

    );

}

export default UserProfile;

If you absolutely have to use a string you need to transform it to JSX, which you can do with babel:

import babel from 'babel-core';
var myComponent = eval(babel.transform('<>Test Text <Text style={styles.text2}>Test Text2</Text></>).code);

Upvotes: 3

Related Questions