Category: javascript

The overview is:

• User gets on a page with headers for different sections (there will not be texts from the sections, just their respective headers).
• While the user is reading the headers, I want to silently load the texts linked to each section.

The reason I need this is because this app will be used in a country with limited mobile data infrastructure.

Right now, I am just loading all of the data on load. This shows no problems at the moment, but I’m on a laptop connected to pretty speedy wifi.

I am trying to update the total count of each type of orders that are available before rendering it to UI. I am facing issue with the count not updating correctly for the particular key.

I have 3 small snippets of the code.

Dummy JSON

  export let orders = [
{
  id: "1000",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Completed",
  notes: "Good",
},
{
  id: "1001",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Completed",
  notes: "",
},
{
  id: "1002",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Pending",
  notes: "Something is better",
},
{
  id: "1003",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Cancelled",
  notes: "",
},
{
  id: "1004",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Collected",
  notes: "",
},
{
  id: "1005",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Ready",
  notes: "",
},
{
  id: "1006",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Accepted",
  notes: "almost",
},
{
  id: "1007",
  dateTime: "Tue 13 Jun 11:52 AM",
  merchant: "RAJUGARI VINDU BOJANAM",
  customer: "Purnima Reddy",
  items: "3",
  total: "862.42",
  type: "Delivery",
  payment: "cod",
  status: "Completed",
  notes: "almost",
},
];

In Rendering JS File

useState Part

  let [counts, setCounts] = useState({
  All: orders.length,
  Pending: 0,
  Accepted: 0,
  Ready: 0,
  Collected: 0,
  Completed: 0,
  Cancelled: 0,
});

useEffect Part

useEffect(() => {
for (let i = 0; i < orders.length; i++) {
  let key = orders[i].status;
  let prevValue = counts[orders[0].status];
  setCounts((counts) => ({ ...counts, [key]: prevValue + 1 }));
}
}, []);

In useEffect I am trying to loop through the elements and store keys of counts in key variable. Storing previous value in prevValue. While setting the value I am spreading it as well. Not sure why the output in the console is all 1 even if the count of some key is more like “Completed”

Im trying to call a very simple JavasScript function with if and else in a Python Flask app but dont get it working properly.
The function works when I test it with a simple setup using only a javascript-file and a index.html.

let changed = false;
console.log("Changed = " + changed);

function changeColor() {

    if (changed == true ) {
        document.getElementById("bg1").style.backgroundColor = "red";
        changed = false;
        console.log("Changed to red (Changed = " + changed + ")");
    } else {
        document.getElementById("bg1").style.backgroundColor = "green";
        changed = true;
        console.log("Changed to green (Changed = " + changed + ")");
    }  
};

This is what it looks like when I test it outside my Flask-app:
(https://i.stack.imgur.com/FWecw.png)

And this is what i looks like when I run it inside my Flask-app:
(https://i.stack.imgur.com/BoP5H.png)

For some reason, it runs both the if and else statement.

If I run call the function from the Console in my Flask app, it works.
(https://i.stack.imgur.com/g2iS6.png)

To call the function in my Flask app, I use onclick=onclick=”changeColor()”.

            <ul class="list-group">
                {% for item in RecepieIngredients.query.filter_by(recepie_id = picked_recepie.id) %}
                <li class="list-group-item" id="bg{{ item.id }}"  >
                    <div class="form-check" onclick="changeColor()">
                        <input class="form-check-input me-2" type="checkbox" value="" id="{{ item.id }}">
                        <label class="form-check-label stretched-link" for="{{ item.id }}">
                        {% if item.amount % 1 == 0 %}
                        {{ "%.0f"|format(item.amount|float) }} {{ item.unit }} {{ item.ingredient }}
                        {% else %}
                        {{ item.amount }} {{ item.unit }} {{ item.ingredient }}
                        {% endif %}
                        </label>
                    </div>
                </li>
                {% endfor %}           
            </ul>

There are probably different and better ways of accomplishing what I’m trying to do. And I usually just move on when I hit this kind of obsticle that’s above my level of knowlage. But this time, I realy want to understand the concept :). And I cant find anything when googling.

Thanks!

I would like to write a command to change the volume of the music being played, but each time the player and resource variables in the volume() function are empty while the bot normally plays the song. What can I do to make it work?

class music_cmd{
    constructor(client, message, prefix, cmd, args, generateDependencyReport, joinVoiceChannel, createAudioPlayer, createAudioResource, ytdl){

        this.client = client;
        this.message = message;
        this.prefix = prefix;
        this.cmd = cmd;
        this.args = args;
        this.joinVoiceChannel = joinVoiceChannel;
        this.createAudioPlayer = createAudioPlayer;
        this.createAudioResource = createAudioResource;
        this.ytdl = ytdl;
        this.connection = null;
        this.players = new Map();

        if(cmd === 'play'){
            this.play();
        }

        if(cmd === 'volume'){
            this.volume();
        }

    }

    async play(){
        
        try{
            this.connection = await this.joinVoiceChannel({
                channelId: this.message.member.voice.channel.id,
                guildId: this.message.guild.id,
                adapterCreator: this.message.guild.voiceAdapterCreator
            });

            const stream = this.ytdl(this.args[1], { filter: 'audioonly' });
            
            const player = this.createAudioPlayer();
            const resource = this.createAudioResource(stream);

            this.players.set(this.message.guild.id, { player, resource });

            player.play(resource);
            this.connection.subscribe(player);
            this.message.channel.send('Rozpoczynam odtwarzanie utworu..');
        } catch(error){
            console.error(error);
        }
    }

    volume(){
        const volume = parseInt(this.args[1]);
        if (isNaN(volume) || volume < 0 || volume > 100) {
        this.message.channel.send('Podaj poprawną wartość głośności (liczba od 0 do 100).');
        return;
        }

        const guildId = this.message.guild.id;
        const { player, resource } = this.players.get(guildId) || {};

        console.log(player);
        console.log(resource);

        if (!player || !resource) {
        this.message.channel.send('Nie odtwarzam żadnej muzyki.');
        return;
        }

        resource.volume.setVolume(volume / 100);
        this.message.channel.send(`Głośność ustawiona na ${volume}%.`);
    
    }

}

export default music_cmd;

I’ve tried everything to fix it, but I can’t seem to get it to work.

I have material code and batch no as split as the left part as start-slno and the right part as end-slno I have barcode generation for materialcode+$+start-slno to end-slno and at the same time. I am unable to print
barcode from TSC TTP-244 Pro using PHP Codeigniter framework Controller function only.

I have material code and batch no as split as the left part as start-slno and the right part as end-slno I have barcode generation for materialcode+$+start-slno to end-slno and at the same time, I need to print the barcode from TSC TTP-244 Pro using PHP Codeigniter framework Controller function only.

I’m trying to install with:
npx create-react-app my-app

enter image description here

PS D:ProgrammingJsReact> npx create-react-app my-app

npm ERR! code ENOENT

npm ERR! syscall lstat

npm ERR! path C:UsersNGUYEN THI PHUCAppDataRoamingnpm

npm ERR! errno -4058

npm ERR! enoent ENOENT: no such file or directory, lstat ‘C:UsersNGUYEN
THI PHUCAppDataRoamingnpm’

npm ERR! enoent This is related to npm not being able to find a file.

npm ERR! enoent

npm ERR! A complete log of this run can be found in:

npm ERR! C:UsersNGUYEN THI PHUCAppDataLocalnpm-cache_logs2023 07-08T04_35_31_903Z-debug-0.log

I use npm 9.5.1, nodejs 18.16.1

I tried redownload my nodejs but it still doesn’t work.

So I’ve created a view in React Native (Work.js) that pulls portfolio information from a database (Supabase) and then loops through that returned work object and loads the data into a card-style custom component called WorkTile.js.

Work.js

import React, { useEffect, useState, useRef } from "react";
import {Text, Flex, Button, Center, Heading, VStack, ScrollView } from "native-base";
import supabase from "../supabase";
import WorkTile from "../components/WorkTile";
import Bowl from "../components/Bowl";

const Work = () => {
    const [works, setWork] = useState([]);
    const componentMounted = useRef(true);
    
    useEffect(() => {
        const fetchWork = async () => {
            const {data, error} = await supabase.from('work').select('*').order('featured', {ascending: false}); //.eq('type', '3D')
            
            if (error) {
                console.log('error', error);
            } else {
                setWork(data);
            }
        };
        if (componentMounted.current) {
            fetchWork();
        }

        return () => {
            componentMounted.current = false; 

        };
    }, []);

    return ( 
        <ScrollView h={"100%"} w={[400, 480, 640]} style={{ overflowx: "hidden" }}>
            <Bowl />
            <VStack pb={5} pt={0} mt={-200}  justifyContent={"space-between"}>
                <Heading mt={headings.mt} mb={headings.mb} pb={headings.pb} size={headings.size} borderBottomWidth={headings.bbw} borderBottomColor={headings.bbc} alignSelf={"flex-start"}>
                    Work
                </Heading>
                <Text fontSize={16} textAlign={"justify"}>Hello! My name is Jamie and I'm full stack web and app developer based outta Richmond, VA. In my years in marketing I've worn a lot of hats, including designer, developer, systems engineer, photographer, videogropher, project manager, product manager, and solutions architect and I love every minute of it! When I'm not online, you can find me on my bike, on my drumset, or making something on the stove top.</Text>            
            </VStack>      

            {/* Work Component */}
            <Center>
                <Flex flex={1} flexWrap={"wrap"} flexDirection={"row"} justifyContent={["center", "center", "space-between"]} >
                    {works.map((work, index) => (  
                        <WorkTile key={work.id} data={work} />
                    ))}
                </Flex>
            </Center>

            <Center>
                <Button mt={12} alignSelf="center" onPress={() => navigation.dispatch( CommonActions.navigate({ name: 'Work',  params: { cameFrom: 'Home' } } ) ) } >
                    Check out my resume ---
                </Button>
            </Center>

            <Center mt={8} mb={6}><Text fontSize={12} color={"warmGray.500"}>© {new Date().getFullYear()} Jamie Taylor. All rights reserved.</Text></Center>

        </ScrollView>
    );
}
 
export default Work;

WorkTile.js

import {Text, AspectRatio, Stack, Pressable, Heading } from "native-base";
import { Image } from "react-native";

function WorkTile({data}) {  
    return ( 
        <Pressable mt={5} shadow="2" rounded="lg" w={{ base: 96, md: 72, lg: 48 }} 
            _light={{ bg: "coolGray.50" }} _dark={{ bg: "gray.800" }} overflow={"hidden"}>
            <AspectRatio 
                ratio= {{ 
                    base: 16/9,
                    md: 16/9
                }} height= {{
                    base: 20,
                    md: 20
                }} >
                <Image key={data.id} resizeMode="cover" source={{
                    uri: data.imageFull
                }} alt={data.blurb} />
            </AspectRatio>
            <Text bold position="absolute" color="coolGray.50" top="0" m={3} mt={2}>
                {data.type.toUpperCase()}
            </Text>                       
            <Stack space="2" p="4">
                {/* <Text color="gray.400">{data.created_at}</Text> */}
                <Heading size={"md"} fontWeight="medium" isTruncated>
                    {data.name}
                </Heading>
                <Text isTruncated noOfLines={[2,4,4]}>
                    {data.blurb}
                </Text>
            </Stack>
        </Pressable>
    );
}

export default WorkTile;

The issue I’m having is that everything loads fine the first time, however after loading another view and coming back, all the text pulled from the database is there, however the images fail to load (see screenshots below). The issue persists regardless of Android, iOS, or web. I’m not getting any errors and I’ve tried a number of things from using useState, to using AsyncStorage, different Image components, etc. I notice that when I log the URLs used (data.imageFull) in WorkTile.js, they also only get logged to the console on initial load. I cannot figure out what I’m missing! Any help would be very much appreciated. Thanks in advance!

Initial Load:

Subsequent Views:

I have a PHP script register.php.

Within that file I want to call and run an external JavaScript file, charge.js.

The directory structure is

public/
  index.php
src/
  register.php
  js/
    charge.js

Within the PHP file I’ve tried

<?php
...
require('js/charge.js');
...
?>

and

<?php
...
?>
<script src="js/charge.js"></script>
<?php
...
?>

with no apparent errors, but (e.g.) console.log() statements in charge.js are not printing to console.

I have a code that updates the candle data every second. When changing the scale of the graph with the cursor, when updating everything returns to its original state. How do I make sure that the scale is preserved?
use lib night-vision – https://github.com/project-nv/night-vision

enter link video

Due to the fact that the chart calls a query to the data every second, the chart is updated and the user scale is reset to the original one.

import "./style.css";
import { NightVision } from "night-vision";

document.querySelector("#app").innerHTML = `
<style>
  body {
    background-color: #0c0d0e;
  }
</style>
<div class="button-group">
  <button id="loading">Loading...</button>
</div>
<div id="chart-container"></div>
`;

function el(id) {
  return document.getElementById(id);
}

let chart = new NightVision("chart-container", {
  autoResize: true,
  colors: {
    back: "#111113",
    grid: "#2e2f3055"
  }
});

let candles = [];

// Load the first piece of the data
loadData();

// Load data from API
function loadData() {
  fetchCandles()
    .then((data) => {
      candles = data;
      chart.data = {
        panes: [
          {
            overlays: [
              {
                name: "APE Tether US Binance",
                type: "Candles",
                data: candles
              }
            ]
          }
        ]
      };
      el("loading").hidden = true;
    })
    .catch((error) => {
      console.error("Error loading data:", error);
    });
}

// Load candles from API
function fetchCandles() {
  const symbol = "apeusdt";
  const interval = "1m";
  const url = `https://api1.binance.com/api/v3/klines?symbol=${symbol.toUpperCase()}&interval=${interval}`;

  return fetch(url)
    .then((response) => response.json())
    .then((data) => {
      return data.map((candle) => {
        return [
          parseInt(candle[0]),
          parseFloat(candle[1]),
          parseFloat(candle[2]),
          parseFloat(candle[3]),
          parseFloat(candle[4]),
          parseFloat(candle[5])
        ];
      });
    });
}

// Update candles every second
setInterval(updateData, 1000);

// Update candle data on the chart
// Update candle data on the chart
// Update candle data on the chart
function updateData() {
  fetchCandles()
    .then((data) => {
      chart.data = {
        panes: [
          {
            overlays: [
              {
                name: "APE Tether US Binance",
                type: "Candles",
                data: data
              }
            ]
          }
        ]
      };
    })
    .catch((error) => {
      console.error("Error updating data:", error);
    });
}



// Reference for experiments
window.chart = chart;

I have a component that is reused in other components but there is a problem that the code handle action events (e.g: onDelete) are repeated too many times. I have to handle onDelete in all places where PostCard is used even though the logic code makes no difference except at the Home page. So is there any way I can avoid the repetition of handleDelete? Respect any ideas. I’m new to React.js, hope you guys can help me!

PostCard component:

 function PostCard ({ item, onDelete }) => {
    return (
      <div onClick={() => onDelete(item.id)}>{item.title}</div>
    )
 }

PostCard using in Home page:

 const HomePage = () => {

   function handleDelete() {
      // only mutate array to re-render list (not redirect)
   }

   return (
      <>
        {postList.map(post => (
           <PostCard item={post} onDelete={handleDelete} />
        ))}
      </>
   )
  
 }

PostCard using in detail page:

 const DetailPage = () => {
   function handleDelete() {
      // redirect to home page after delete
   }

   return (        
      <PostCard item={post} onDelete={handleDelete} />
   )
  
 }

PostCard using in another page:

 const AnotherPage = () => {
   function handleDelete() {
      // redirect to home page after delete
   }

   return (        
      <PostCard item={post} onDelete={handleDelete} />
   )
  
 }

I have a function called “handleStep” that iterates through each step in bubble sort, and it should update the history such that I can use “handleGoBack” to return to any previous states. I know there is some problem with the history when I update the passIndex but I don’t know what to do. Please help me!

const [numbers, setNumbers] = useState([5, 2, 9, 1, 8]);
    const [passIndex, setPassIndex] = useState(0);
    const [swapIndex, setSwapIndex] = useState(0);
    const [swapDetails, setSwapDetails] = useState([]);
    const [history, setHistory] = useState([{ numbers: [...numbers], swapDetails: [] },]);

    const handleGoBack = () => {

        if (passIndex === 0 && swapIndex === 0) {
            return; // Already at the initial step
        }

        let previousSwap = swapIndex - 1;
        if (previousSwap < 0) {
            previousSwap = numbers.length-1;
            setPassIndex(passIndex - 1);
        }
        const previousHistory = history.slice(0, history.length - 1);
        const previousStep = previousHistory[previousHistory.length - 1];

        setNumbers([...previousStep.numbers]);
        setSwapIndex(previousSwap);
        setSwapDetails(swapDetails.slice(0, swapDetails.length - 1));
        setHistory(previousHistory);

};

const handleStep = () => {

        // Return if already sorted
        if (isSorted(numbers) || passIndex >= numbers.length) {
            return;
        }

        // Updates if the next number is less than the current number at swapIndex
        if (numbers[swapIndex] > numbers[swapIndex + 1]) {
            [numbers[swapIndex], numbers[swapIndex + 1]] = [
                numbers[swapIndex + 1],
                numbers[swapIndex],
            ];
            swapDetails.push(
                `${numbers[swapIndex]} swaps with ${numbers[swapIndex + 1]}`
            );

        }
        else {
            swapDetails.push('No swap made');
        }

        const updatedHistory = [...history, { numbers: numbers, swapDetails: swapDetails }];
        setHistory(updatedHistory);

        // Return if swapIndex+1 has reached the final length of numbers minus passIndex
        if (swapIndex + 1 === numbers.length - passIndex) {
            setSwapIndex(0);
            setPassIndex(passIndex + 1);
            setSwapDetails([]);
            return;
        }

        // Update swapIndex if it has not reached the final length of numbers minus passIndex
        setSwapIndex(swapIndex + 1);
};


const isSorted = (arr) => {
        for (let i = 0; i < arr.length - 1; i++) {
            if (arr[i] > arr[i + 1]) {
                return false;
            }
        }
        return true;
};

I tried updating the history when I update the passIndex, but I don’t really know.

I am using addsearch-ui v 0.7.11, and I am trying to implement a custom pagination based on this template example. However, when I do so, the arrow buttons always go to the first page, regardless of what my current page is. Below is my code:

var paginationTemplate = `
  <div class="addsearch-pagination">
    {{#equals currentPage 1}}    
      <button disabled class="addsearch-pagination-disabled-button" aria-label="Previous page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.21214 7.45579L10.0789 1.2253C10.3618 0.9249 10.8206 0.9249 11.1035 1.2253L11.7878 1.95209C12.0704 2.25217 12.0707 2.7382 11.789 3.03892L7.13935 7.99984L11.7887 12.9611C12.0707 13.2618 12.0701 13.7478 11.7875 14.0479L11.1032 14.7747C10.8203 15.0751 10.3615 15.0751 10.0786 14.7747L4.21214 8.54389C3.92929 8.24349 3.92929 7.75619 4.21214 7.45579Z" fill="#10559A"/>
        </svg>
      </button>
    {{/equals}}
    {{#gt currentPage 1}}
      <button data-page="previous" aria-label="Previous page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M4.21214 7.45579L10.0789 1.2253C10.3618 0.9249 10.8206 0.9249 11.1035 1.2253L11.7878 1.95209C12.0704 2.25217 12.0707 2.7382 11.789 3.03892L7.13935 7.99984L11.7887 12.9611C12.0707 13.2618 12.0701 13.7478 11.7875 14.0479L11.1032 14.7747C10.8203 15.0751 10.3615 15.0751 10.0786 14.7747L4.21214 8.54389C3.92929 8.24349 3.92929 7.75619 4.21214 7.45579Z" fill="#10559A"/>
        </svg>
      </button>
    {{/gt}}
    {{#each pages}}
      <button data-page="{{this}}" aria-label="Go to results page {{this}}" {{#equals ../currentPage this}}data-active="true" aria-current="true"{{/equals}}>
        {{this}}
      </button>
    {{/each}}
    {{#lt currentPage lastPage}}
      <button data-page="next" aria-label="Next page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M11.7878 8.54407L5.92106 14.7746C5.63811 15.0751 5.17938 15.0751 4.89646 14.7746L4.2122 14.0479C3.92974 13.748 3.9292 13.2618 4.211 12.9611L8.8605 7.99998L4.211 3.03892C3.9292 2.73823 3.92974 2.25205 4.2122 1.95207L4.89646 1.22537C5.17941 0.924876 5.63814 0.924876 5.92106 1.22537L11.7878 7.45593C12.0707 7.75639 12.0707 8.24357 11.7878 8.54407Z" fill="#10559A"/>
        </svg>
      </button>
    {{/lt}}
    {{#equals currentPage lastPage}}    
      <button disabled class="addsearch-pagination-disabled-button" aria-label="Next page">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M11.7878 8.54407L5.92106 14.7746C5.63811 15.0751 5.17938 15.0751 4.89646 14.7746L4.2122 14.0479C3.92974 13.748 3.9292 13.2618 4.211 12.9611L8.8605 7.99998L4.211 3.03892C3.9292 2.73823 3.92974 2.25205 4.2122 1.95207L4.89646 1.22537C5.17941 0.924876 5.63814 0.924876 5.92106 1.22537L11.7878 7.45593C12.0707 7.75639 12.0707 8.24357 11.7878 8.54407Z" fill="#10559A"/>
        </svg>
      </button>
    {{/equals}}
  </div>
`;

Please advise.

For poc purpose I tried to install this package mapbox-gl-directions, but I am facing below error. In the stackblitz its working in js file, even in our codebase its working fine in js file but not in tsx file. Can you let me know how to fix it ,Providing code below. Even I tried installing types also but still not working

https://stackblitz.com/edit/react-ts-mapbox-ce8v3l?file=index.tsx

`componentDidMount() {
    const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/bocko/ck1ayjvgx02141cmkiobyyawu',
      // center: [this.state.lng, this.state.lat],
      // zoom: this.state.zoom,
      bounds: [18.8, 42.2, 23.0, 46.2],
      maxBounds: [17, 41, 24, 47],
    });

    map.addControl(
      window.MapboxDirections({
        accessToken: mapboxgl.accessToken,
      }),
      'top-left'
    );`

I want to build an extension like React dev tools or Vue dev tools. So I need the extension to have a dedicated tab in the developer console of the browser.

I am hoping I will create custom HTML, CSS and JS to console the section of the chrome developer tab.

But I am not able to find this documentation or property which controls this. can anyone guide me on how I can achieve the same? Eg in the below image react devtools extensions creates a new Components Tab that it controls. I want to build a similar interaction.

I’m trying to convert to object for rechart but array doesn’t seem to show up.
I google so I may not be clear.

There is no data in my work

need such conversion](https://i.stack.imgur.com/M3QEX.png)

mycode

my code

data to cononvert

Thanks and looking forward to your reply

I hope I can convert, or can I use any other way