Dynamic table data rendering react native

Question

I want to achieve the data rendering in a form of table something like this:

I have a data (stored in variable 'myData') of form:

{
 "id":0,
 "name": ["wheat", "Rice", "Sugar"],
 "Quality":["Good", "good","good"],
 "Quantity":["200","200","200"]
}

I tried mapping the and together to implement this, but it renders the data horizontally in a single row.

This is what I tried to achieve so far with minimum test code.

return (
            <View style={{flexDirection:'column'}}>{myData.map( (item) => {
                return (
                    <View key={item.id}>
                        <View>
                            <Text>
                                {item.name}
                            </Text>
                        </View>
                        <View>
                            <Text >
                                {item.Quality}
                            </Text>
                        </View>
                    </View>

                )
            })}

            </View>
        )

Please help to achieve this

Junius L · Accepted Answer · 2019-06-27 10:29:09Z

2

map each array into it's own View and use flexDirection: "row"

const list = myData.map(item => {
  return (
    <View style={{ flexDirection: 'row'}}>
      <View style={{ flex: 1}}>
        {item.name.map((name, i) => (
          <Text>{i + 1}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.name.map((name, i) => (
          <Text>{name}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.Quality.map((quality, i) => (
          <Text>{quality}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.Quantity.map((quantity, i) => (
          <Text>{`${quantity} Bags`}</Text>
        ))}
      </View>
    </View>
  );
});

edited Jun 27, 2019 at 10:29

answered Jun 27, 2019 at 10:11

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

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

3 Comments

program_bumble_bee Over a year ago

This worked. Can you please explain this? Why we needed to follow such approach? Where I Was lacking?

Junius L Over a year ago

because you have three arrays and to display data you need to loop through each array. flowDirection: 'row' will display the items as rows.

DevAS Over a year ago

Hey, @Junius Can check this question, please!! stackoverflow.com/questions/57595796/…

Jebin Benny · Accepted Answer · 2019-06-27 09:50:54Z

0

Try this,

    return (
                <View style={{flexDirection:'column'}}>{myData.name.map( (item, index) => {
                    return (
                        <View key={item.id}>
                            <View>
                                <Text>
                                    {item}
                                </Text>
                            </View>
                            <View>
                                <Text >
                                    {myData.Quality[index]}
                                </Text>
                            </View>
 <View>
                                <Text >
                                    {myData.Quantity[index]}
                                </Text>
                            </View>
                        </View>

                    )
                })}

                </View>
            )

answered Jun 27, 2019 at 9:50

Jebin Benny

9511 gold badge5 silver badges9 bronze badges

3 Comments

program_bumble_bee Over a year ago

I tired this but not working. What is the need for 'myData.name.map()' when my array is aready starting without any key object name

Jebin Benny Over a year ago

I think myData is your dictionary. If so, I first pick up your array 'name' and try to map.

program_bumble_bee Over a year ago

I edited my question. myData is the variable name in which i am storing my data /array

Collectives™ on Stack Overflow

Dynamic table data rendering react native

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related