Not sure how to map array to component in react native

Question

I want to show items of a json array in chart. The array is the following and is in a separate json file-

{
  "milimeters": ["90", "102", "93", "84"],
}

I want to map this array over a tooltip component I declared in react. I want to show each value of 'millimeters' array upon click -

Below is code for the component-

import data from '../dummyData.json';
const Tooltips = ({ x, y, data }) => {
                  // console.log(data);
                  return data.map((item, index) => (
                    <Text
                      key={index}
                      x={x(data[index])}
                      y={y(item.milimeters) - 15}
                      fontSize={15}
                      fontWeight="lighter"
                      stroke="#fff"
                      fill="#fff"
                      textAnchor="middle"
                      alignmentBaseline="middle"
                    >
                    {`${item.milimeters}`}
                    </Text>
                  ));
                };

This component renders as below- The item.millimeters is showing up as undefined for some reason. How can I map item.milimeter value correctly to each bar?

Prateek Thapa · Accepted Answer · 2021-01-28 04:48:24Z

1

You have to map through data.milimeters since it is an array.

import data from '../dummyData.json';
const Tooltips = ({ x, y, data }) => {
                  // console.log(data);
                  return data.milimeters.map((item, index) => (
                    <Text
                      key={index}
                      x={x(item.milimeters[index])}
                      y={y(item.milimeters) - 15}
                      fontSize={15}
                      fontWeight="lighter"
                      stroke="#fff"
                      fill="#fff"
                      textAnchor="middle"
                      alignmentBaseline="middle"
                    >
                    {`${item}`}
                    </Text>
                  ));
                };

edited Jan 28, 2021 at 4:48

answered Jan 27, 2021 at 10:50

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

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

2 Comments

tallpotato Over a year ago

its returning the following error: Cannot read property 'map' of undefined

Prateek Thapa Over a year ago

are you using data inside your map or item ? Check again, I've updated the code.

Collectives™ on Stack Overflow

Not sure how to map array to component in react native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related