不知道如何将 map 阵列与组件反应原生

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?

Answer 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>
                  ));
                };