Rendering a comma separated string of values in React Native

Question

I am extracting {item.dosage} from a JSON which gives me the following string

"300gr short pasta, 2 spring onions, 50gr parmesan cheese"

and I'd like to show it each ingredient separated by comma in a separate text line like this

   300gr short pasta
   2 spring onions
   50gr parmesan cheese

I was trying to do the following within my JSX

{item.dosage.map((step, i) => (
        <Text>
            {i > 0 && ", "}
               {step}
        </Text>
 ))}

and I'm getting an error about "undefined is not a function...".

what is dosage? what is it contains?

adir abargil
– adir abargil

2020-09-16 12:14:13 +00:00
Commented Sep 16, 2020 at 12:14 — adir abargil
– adir abargil, Commented Sep 16, 2020 at 12:14

Liu Lei · Accepted Answer · 2020-09-16 12:55:23Z

4

const str = "300gr short pasta, 2 spring onions, 50gr parmesan cheese"

...
<Text>
  {str.split(',').map((step)=> <Text>{step}{",\n"}</Text>)}
</Text>
...

// so try this way
<Text>
 {item.dosage.split(',').map((step)=> <Text>{step}{",\n"}</Text>)}
</Text>

edited Sep 16, 2020 at 12:55

answered Sep 16, 2020 at 12:49

Liu Lei

1,2971 gold badge9 silver badges20 bronze badges

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

1 Comment

Butri Over a year ago

it worked although I needed to adjust slightly the code with split(", ") and {"\n"}. Many thanks

adir abargil · Accepted Answer · 2020-09-16 12:55:41Z

2

in the first sight, it looks like that is getting close to what u look for this way u can give margins to the View as desired..

{item.dosage.split(', ').map((step, i) => (
  <View>
      <Text>
        {i > 0 && ", "}

         {step}
      </Text>
  </View>
 ))}

edited Sep 16, 2020 at 12:55

answered Sep 16, 2020 at 12:15

adir abargil

5,7453 gold badges23 silver badges29 bronze badges

3 Comments

Butri Over a year ago

your solution does not seem to be working, it is still showing as a full string without comma separation.

adir abargil Over a year ago

what does item.dosage contains.? i have edited solution

Butri Over a year ago

it is commented in the first line of this post "300gr short pasta, 2 spring onions, 50gr parmesan cheese"

Collectives™ on Stack Overflow

Rendering a comma separated string of values in React Native

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related