how do I concatinate string response inside an array in React native?

Question

I am accessing one string from a list of content, and I want to concatenate the strings with commas, however whenever I try to do so the style is breaking both for web and mobile.

Below is the code that I have written

<View style={{flexDirection: 'row'}}>
            {props.item.vaccine_list.map((item, i) => {
              console.log('teme', typeof item.name);
              return (
                <View
                  key={i}
                  style={
                    width > 414
                      ? {flexDirection: 'row', width: 35}
                      : {
                          flexDirection: 'row',
                          width: 30,
                        }
                  }>
                  <Text
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 12,
                      color: '#000',
                    }}>
                    {item.name + ','}
                  </Text>
                </View>
              );
            })}
          </View>

mobile view:

web view:

Please tell me how to fix the style and bring the strings together in a line cleanly as comma separated values.

why not use join? ['a', 'b' ].join(',')

Ramesh Reddy
– Ramesh Reddy

2020-11-03 07:43:14 +00:00
Commented Nov 3, 2020 at 7:43 — Ramesh Reddy
– Ramesh Reddy, Commented Nov 3, 2020 at 7:43

Drew Reese · Accepted Answer · 2020-11-03 07:45:10Z

3

If props.item.vaccine_list is the array of "strings" you want to concatenate then I suggest you map the name properties first, then join them with commas.

props.item.vaccine_list.map(({ name }) => name).join(', ')

Code

<View style={{flexDirection: 'row'}}>
  <View
    style={
    width > 414
      ? {flexDirection: 'row', width: 35}
      : {
        flexDirection: 'row',
        width: 30,
      }}
  >
    <Text
      style={{
        fontFamily: 'Roboto',
        fontSize: 12,
        color: '#000',
      }}
    >
      {props.item.vaccine_list.map(({ name }) => name).join(', ')}
    </Text>
  </View>
</View>

answered Nov 3, 2020 at 7:45

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

Comments

Giovanni Esposito · Accepted Answer · 2023-08-10 14:24:30Z

3

Why don't you concatenate just the string keeping one Text like:

<View style={{flexDirection: 'row'}}>
   <View>
      <Text>
         {props.item.vaccine_list.map(({ name }) => name).join(', ')}
      </Text>
    </View>
</View>

edited Aug 10, 2023 at 14:24

answered Nov 3, 2020 at 7:46

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Collectives™ on Stack Overflow

how do I concatinate string response inside an array in React native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related