javascript - Not sure how to map JSON array to component

Question

I want to map values of a json array in chart. The array looks like below and is in a separate json file-

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

I want to map this array over my tooltip component so I can show values of each corresponding 'millimeters' value 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 like below and the item.millimeters is showing up as undefined due to some reason. How can I map each item.milimeter value correctly to each bar?

question from:https://stackoverflow.com/questions/65932162/not-sure-how-to-map-json-array-to-component

Answer 1

I am appending the result here.

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)}
                      y={y(item) - 15}
                      fontSize={15}
                      fontWeight="lighter"
                      stroke="#fff"
                      fill="#fff"
                      textAnchor="middle"
                      alignmentBaseline="middle"
                    >
                    {`${item}`}
                    </Text>
                  ));
                };