How to convert dynamically changing dataKey for rechart

Question

I have used rechart to create a Line chart.

my code is like

render(){
    const {items} = this.state;
    var data = [
      {name: 10,  FL: 2400, TM: 2400},
      {name: 20,  FL: 1398, TM: 2210},
      {name: 30,  FL: 9800, TM: 2290},
      {name: 40,  FL: 3908, TM: 2000},
      {name: 50,  FL: 4800, TM: 2181},
      {name: 60,  FL: 3800, TM: 2500},
      {name: 70,  FL: 4300, TM: 2100},
    ];

    return (
      <div>   
              <CustomLineChart data={data}/>
              
      </div>
  );

customLineChart.js

var renderLines = () => {
    var dynamic_array = ["FL", "TM", "LL"];
    var color = ["#8884d8", "#82ca9d", "orange", "pink"]
    var index =0;
    const lines = dynamic_array.map((value,index) => (
      <Line
        key={value}
        name={value}
        type="monotone"
        dataKey={value}
        stroke={color[index]} 
      />
      
    ));
    return lines;
  }

var modifyFormatter = (value, name, props) => {
    const nameJSX = <span><span style={{
        display: "inline-block",
        marginRight: "5px",
        borderRadius: "10px",
        width: "10px",
        height: "10px",
        backgroundColor: props.color
    }}></span>{name} : {value}</span>
    return [nameJSX];
}

function CustomLineChart(props) {
  
    return (
        <LineChart
            width={2000}
            height={300}
            data={props.data}
            margin={{
                top: 5, right: 30, left: 20, bottom: 5,
            }}>
            <CartesianGrid strokeDasharray="3 3" horizontal={false} vertical={false} />
            <XAxis dataKey={Object.keys(props.data[0])[0]} />
            <YAxis />
            <Tooltip formatter={modifyFormatter} />
            <Legend />
            {renderLines()}
        </LineChart>
      
    );

}

Now, I need to pass values for {name: 10, FL: 2400, TM: 2400} dynamically like {name: 10, {category}: {value}} where 'category' and 'value' are just variables. Simply, I need to assign value as

data.push( {name: 80,{category} : {value}});

I was able to pass value for {value} but still I could not do the same for {category}. Can anybody help?

Answer 1

data.push( {name: 80,[category] : {value}});