CODEWITHSUNDEEP
javascriptarraystypescriptreact-native
Athavan T
Athavan T

Reputation: 378

Unable to map the array and get the values on Screen React Native

const DynPut: FC<Props> = Props => {

const [value, setValue] = useState<string>(['1', '2', '3', '4']);

  return (
    <View>
      {value.map(v => {
        <Text>{v}</Text>;
      })}
    </View>
  );
};

Unable to get the values 1-5 on the screen. am using typescript and also saved the file with .tsx extension

Upvotes: 2

Views: 985

Answers (3)

Majdi Mohammad
Majdi Mohammad

Reputation: 167

To render the component inside map you need to add return or just brackets

{value.map((v) => (
    <Text>{v}</Text>
))}

Or

{value.map((v) => {
// enter code here (process)
return(
        <Text>{v}</Text>
    )
})}

Upvotes: 0

axtck
axtck

Reputation: 3965

FYI

map() expects a return value, there are multiple possibilities, for example:

const data = [{ x: 55, y: 34 }, { x: 75, y: 12 }];

const result1 = data.map(d => d.x); // inline

const result2 = data.map(d => (
  d.x // use round brackets
));

const result3 = data.map(d => {
  return d.x; // use return statement
});

console.log(result1, result2, result3);

The last method is handy if you want to do something with the data before returning a value.

const data = [{ x: 55, y: 34 }, { x: 75, y: 12 }];

const result = data.map(d => {
  const xTimesFive = d.x * 5; // do something with the x value
  const dividedByTwo = xTimesFive / 2;
  return dividedByTwo;
});

console.log(result);

// note, a simple calculation or check can also be done in the other methods
console.log(data.map(d => d.x > 60 ? "big" : "small"));

Upvotes: 2

jakehurt
jakehurt

Reputation: 176

The syntax for the map is wrong, use normal brackets instead:

{value.map((v) => (
    <Text>{v}</Text>
))}

Upvotes: 2

Related Questions