javascriptreactjsrenderscriptarray-maprecharts

how do i return http tags in map function react


I'm trying to build a dynamic bar chart which has many levels .. So i used map function to generate the the chart . i do console logging the var and stuffs, its working properly. But the return of the tag doesn't render . i try simple div {<div>Hey</div>} but it also doesn't render . This is my code ,

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';


export const LocalBarChart =({config, data})=>{

    //data :-  [{name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue} , {name: 'X Axis Name', levelOneName: levelOneValue, levelTwoName: levelTwoValue}];

    //config :-  {numberOfLevel: (1-10) , COLORS : ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']}; // 0 means full filled piechart, 0<x<50 ->liner circle

    const COLORS = config.COLORS;
    let keysArray=Object.keys(data[0]);

    return(
        <BarChart width={600} height={300} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
            <CartesianGrid strokeDasharray="6 0"/>
            <XAxis dataKey="name"/>
            <YAxis/>
            <Tooltip/>
            <Legend />


            {  data.map((e, i) => {

                if(i===0){
                    console.log(e);
                    keysArray.map((datas,indexs)=>{
                        if(datas!=="name"){
                            console.log(indexs)
                            console.log(datas)
                            return (
                                <Bar dataKey={datas} stackId="a" fill={COLORS[indexs]} />
                            );

                        }
                    })
                }


            }) }


        {/* <Bar dataKey="pv" stackId="a" fill="#8884d8" />
       <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
       <Bar dataKey={keysArray[1]} stackId="a" fill={COLORS[0]} />    */}
        </BarChart>
    );


}

Please help me to figure it out .. thank you


Solution

  • try adding return before keysArray.map((datas,indexs)=>{ you need to return inside map in order to get array.

    currently you are getting array of null values.

    from your code - you'll be getting 2D array. is that what you want !