Category: javascript

I have the following code, which has a function converting a Jira Multi-Select Customfield to Autocomplete Renderer: https://confluence.atlassian.com/jirakb/how-to-enable-autocomplete-renderer-for-multi-select-custom-field-in-jira-754978239.html

The Jira context etc. is not so relevant here, however, the only thing I try and fail to achieve is to add a simple placeholder text to the Dropdown. The placeholder should be there when the Dropdown has no value selected.

Can someone help? I can’t imagine it to be that difficult if you are familiar with the syntax.

<script type="text/javascript">
(function($) {
    
    function convertMulti(id){
        if (AJS.$('#'+id+"-textarea").length == 0){
            new AJS.MultiSelect({

                element: $("#"+id),
                itemAttrDisplayed: "label",
                errorMessage: AJS.params.multiselectComponentsError,
                
                
            });
        }
    }
  
    AJS.toInit(function(){ 
        convertMulti("customfield_16043");
        
    })
  
    JIRA.bind(JIRA.Events.NEW_CONTENT_ADDED, function (e, context) {
        AJS.$("#customfield_16043 option[value='-1']").remove();
        convertMulti("customfield_16043");
        
    });
})(AJS.$);



</script>

in the following section of the code snippet, I tried several things to add a placeholder. However, I am not familiar enough with javascript/jquery and I failed to succeed here.

new AJS.MultiSelect({.....})

I’m facing an issue with organizing assets in the output directory while using Vite for my project. I’ve configured the output.assetFileNames option to organize assets into subdirectories based on their types (css, fonts, img, js), but it’s not working as expected.

this my Vite Configuration:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import autoprefixer from 'autoprefixer';
import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';
// Specify the input and output directories for img minify
const inputDir = './src/assets/img';
const outputDir = './dist/assets';

export default defineConfig({
    server: {
        host: true,
        port: 8080,
        open: true,
        https: false,
        proxy: {
            '/api': {
                target: 'https://jsonplaceholder.typicode.com',
                changeOrigin: true,
                rewrite: path => path.replace(/^/api/, ''),
            },
        },
    },
    css: {
        postcss: {
            plugins: [
                autoprefixer(), // Add CSS prefixes
            ],
        },
    },
    build: {
        plugins: [
            vue(),// 
            autoprefixer(), // Add CSS prefixes
            // Minify images
            imagemin([`${inputDir}/*.{jpg,png}`], {
                destination: outputDir,
                plugins: [
                    imageminWebp({
                        quality: 75, // Adjust the quality (0 to 100)
                    }),
                ],
            }),
        ],
        assetsDir: 'assets',
        minify: 'terser', // or 'esbuild' for esbuild-based minification
        sourcemap: true,
        cssCodeSplit: true,
        rollupOptions: {
            output: {
                assetFileNames: ({ name, ext }) => {
                    // Organize assets based on file type
                    if (ext === '.css') {
                        return `assets/css/${name}`;
                    } else if (ext === '.woff' || ext === '.woff2') {
                        return `assets/fonts/${name}`;
                    } else if (ext === '.jpg' || ext === '.webp') {
                        return `assets/img/${name}`;
                    } else if (ext === '.js') {
                        return `assets/js/${name}`;
                    }
                    // For other file types, use the default output format with hash
                    return `assets/${name}`;
                },
            },
        },
    },

});

i was tring many thing but this is the colse structure with this config

Project Structure:

dist
 ┣ assets
 ┃ ┣ arslaner.jpg
 ┃ ┣ arslaner.webp
 ┃ ┣ index-gT3gkYz_.js.map
 ┃ ┣ index.css
 ┃ ┣ rawert.jpg
 ┃ ┣ rawert.webp
 ┃ ┣ SegoeUI-VF.woff
 ┃ ┗ SegoeUI-VF.woff2
 ┣ index.html
 ┗ vite.svg

Expected Output:

dist
 ┣ assets
 ┃ ┣ css
 ┃ ┃ ┗ index.css
 ┃ ┣ fonts
 ┃ ┃ ┣ SegoeUI-VF.woff
 ┃ ┃ ┗ SegoeUI-VF.woff2
 ┃ ┣ img
 ┃ ┃ ┣ arslaner.jpg
 ┃ ┃ ┣ arslaner.webp
 ┃ ┃ ┣ rawert.jpg
 ┃ ┃ ┗ rawert.webp
 ┃ ┗ js
 ┃ ┃ ┗ index-gT3gkYz_.js.map
 ┣ index.html
 ┗ vite.svg

Issue:
Despite configuring the output.assetFileNames function, the assets are not being organized into the specified subdirectories. I’ve checked the file extensions, reviewed the Vite configuration, and tried running a clean build, but the issue persists.

I appreciate any help in resolving this issue. If you need more information, please let me know. Thank you!

I want to automate actions on momio.me programmatically using python.

To do so I need to connect to wss://de.momio.me/pipe and then send the messages accordingly

I have tried connecting to the websocket directly but as soon as I sent a message it immediately closed the connection.

I could use selenium as an alternative to achieve the automation but I would not be able to learn much this way.

this is the output of page !

I tried transferring the css and html files several times and made sure to link the css link but it gives the same look i try many times and i cheaked the linking between css and gtml and all things i see its right but the output is the same in each try i want to know where is the error in my code to solve him and learned from my mistakes the html code

So I found that this is the problem with so many of developers using React-Infinite-Scroll-Component, but haven’t found a solution yet! I guess the fetchData won’t work after the second run of loading. Can somebody please help me with this?
This is the link to my SandBox demo: enter link description here

But I’ll add the code for convenience too. This is my NameList Component which the Infinite Scroll is placed in:

function NameList() {
  const [namesList, setNamesList] = useState([]);
  const [noMore, setNoMore] = useState(true);
  const [page, setPage] = useState(2);

  useEffect(() => {
    const getNames = async () => {
      const res = await fetch(
        `https://r3py2q-3000.csb.app/users?_page=1&_limit=20`,
      );
      const data = await res.json();
      setNamesList(data);
    };
    getNames();
  }, []);

  console.log(namesList);

  const fetchNames = async () => {
    const res = await fetch(
      `https://r3py2q-3000.csb.app/users?_page=${page}&_limit=20`,
    );
    const data = await res.json();
    return data;
  };

  const fetchData = async () => {
    const namesFromServer = await fetchNames();
    setNamesList([...namesList, ...namesFromServer]);
    if (namesFromServer.length === 0 || namesFromServer.length < 20) {
      setNoMore(false);
    }
    setPage(page + 1);
  };

  const namesToShow = namesList;

  return (
    <div>
      <Box
        sx={{
          overflowY: "scroll",
          height: "30rem",
        }}
      >
      <InfiniteScroll
        dataLength={namesList.length}
        next={fetchData}
        hasMore={noMore}
        loader={<h4>Loading...</h4>}
        endMessage={
        <b>End of names!</b>
        }
      >
        <List>
          {namesToShow.map(({ first, last }, index) => (
            <ListItem key={index} divider>
              <ListItemText primary={first} secondary={last} />
            </ListItem>
          ))}
        </List>
      </InfiniteScroll>
      </Box>
    </div>
  );
}

I just simply wanted to do stats of non bot users, non bot online users, and bot users

Non bot users and bot users work perfectly fine, but non bot online users return to me random numbers

        await guild.members.fetch({ withPresences: true }).then(async fetchedMembers => {
            const onlineS = await fetchedMembers.filter(member => !member.presence || member.presence?.status !== 'offline' && !member.user.bot);
            console.log(onlineS.size)
        })

currently im using this to get non bot online users count, but it just returns random numbers and always member.presence is null, that’s how i initialize my client

const client = new Client({ 
    intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMembers, GatewayIntentBits.MessageContent, GatewayIntentBits.GuildMessages, GatewayIntentBits.GuildMessageReactions, GatewayIntentBits.GuildVoiceStates, GatewayIntentBits.GuildPresences ],
    partials: [Partials.Message, Partials.Channel, Partials.Reaction, Partials.GuildMember],
    allowedMentions: { parse: [ 'roles', 'users' ] }
});

so everything should work just fine, is there some sort of mistake i made?

ps. i have presence intent enabled in discord developer portal

I have been making a clicker game, and for some reason, when I added local storage to my game, it stopped working.
This is the site

This is the code

if (window.localstorage.played = true) {
  let points = window.localstorage.getItem("points");
  let cpc = window.localstorage.getItem("cpc");
  let cps = window.localstorage.getItem("cps");
  let clicks = window.localstorage.getItem("clicks");
  let secondsplayed = window.localstorage.getItem("secondsplayed");
} else {
  window.localstorage.setItem("played", true);
  let points = 0;
  let cpc = 1;
  let cps = 0;
  let clicks = 0;
  let secondsplayed = 0;
}

function abbrNum(number) {
  const formatter = Intl.NumberFormat("en", { notation: "compact" });
  return formatter.format(number);
}

function update() {
  document.getElementById("score").innerText = abbrNum(points);
  document.getElementById("upgcpc").innerText = "Upgrade CPC: $" + cpc * 2;
  document.getElementById("upgcps").innerText = "Upgrade CPS: $" + (cps * 5 + 10);
  document.getElementById("cpcstat").innerText = "CPC: " + abbrNum(cpc);
  document.getElementById("cpsstat").innerText = "CPS: " + abbrNum(cps);
  document.getElementById("clicksstat").innerText = "Clicks: " + abbrNum(clicks);
  document.getElementById("secondsstat").innerText = "Seconds played: " + abbrNum(secondsplayed);

  window.localstorage.setItem("points", points);
  window.localstorage.setItem("cpc", cpc);
  window.localstorage.setItem("cps", cps);
  window.localstorage.setItem("clicks", clicks);
  window.localstorage.setItem("secondsplayed", secondsplayed);
}

function autoclick() {
  points = points + cps;
  secondsplayed++;
  update();
}

update();

setInterval(autoclick, 1000);

document.getElementById("button").onclick = () => {
  points = points + cpc;
  clicks++;
  update();
};

document.getElementById("upgcpc").onclick = () => {
  if (points >= cpc * 2) {
    points = points - cpc * 2;
    cpc = cpc + 1;
    update();
  }
};

document.getElementById("upgcps").onclick = () => {
  if (points >= cps * 5 + 10) {
    points = points - (cps * 5 + 10);
    cps = cps + 0.5;
    update();
  }
};

I have tried to figure out issues on my own, and I also used some JavaScript checkers I found online, but I couldn’t get it fixed. I used code directly from W3Schools, so I’m not entirely sure why it doesn’t work.

I have a JavaScript animation that simulates a starfall effect using HTML canvas and “pixel” manipulation. While the animation works, I’m facing efficiency and speed issues, and I’m looking for ways to optimize the code. The animation involves creating stars that fall from the top of the screen and leaving a trail of pixels as they move. The thing is, the pixels are divs, and it reaches thousands.

the current JS code:

const content = document.getElementById("bkg-content");
const background = document.getElementById("bkg");
const ctx = content.getContext("2d", { willReadFrequently: true });

let stars = [];
const maxStars = 20; // Maximum number of stars

let last_x = 0;
let next_spawn = 0;

function getX(size) {
    let random = Math.random() * (window.innerWidth - size);
    return last_x - size > random || random > last_x + size ? random : getX(size);
}

function createStar() {
    let transparency = Math.random();
    let size = transparency * 200 + 100;
    let x = getX(size)
    let fallingSpeed = Math.random() * 30 + 20;
    next_spawn = size / fallingSpeed * 500;

    last_x = x;
    return {
        x,
        y: 0,
        size,
        transparency,
        rotationAngle: 0,
        rotationSpeed: Math.random() * 0.3 + 0.05,
        rotationDirection: Math.random() < 0.5 ? 1 : -1,
        fallingSpeed,
    };
}

function spawnStars(count) {
    for (let i = 0; i < count; i++) {
        stars.push(createStar());
    }

    setTimeout(() => {
        spawnStars(1)
    }, next_spawn)

    console.log(stars.length);
}

function draw() {
    ctx.clearRect(0, 0, content.width, content.height);

    for (let i = 0; i < stars.length; i++) {
        let star = stars[i];
        star.rotationAngle += star.rotationSpeed * star.rotationDirection;
        star.y += star.fallingSpeed;

        if (star.y > window.innerHeight + star.size / 2) {
            // Remove stars that have completely passed the bottom of the screen
            stars.splice(i, 1);
            i--; // Adjust the loop variable since the array length has changed
        } else {
            ctx.save();
            ctx.translate(star.x + star.size / 2, star.y);
            ctx.rotate(star.rotationAngle);

            // Adjust transparency based on star size
            ctx.globalAlpha = star.transparency;
            console.log(ctx.globalAlpha)

            ctx.drawImage(starTXT, -star.size / 2, -star.size / 2, star.size, star.size);

            // Reset global alpha for subsequent drawings
            ctx.globalAlpha = 1;
            ctx.restore();
        }
    }
}


function resizeCanvas() {
    content.width = window.innerWidth;
    content.height = window.innerHeight;

    spawnStars(Math.min(maxStars, 1)); // Initially spawn one star

    setInterval(() => {
        createPixels()
        draw()
    }, 500);
}

function createPixels() {
    const pixel = { size: 9, gap: 3 };
    const numX = Math.floor(window.innerWidth / (pixel.size + pixel.gap));
    const numY = Math.floor(window.innerHeight / (pixel.size + pixel.gap));

    background.style.gridTemplateColumns = `repeat(${numX}, ${pixel.size}px)`;
    background.innerHTML = ''; // clear existing pixels

    for (let x = 0; x < numX; x++) {
        for (let y = 0; y < numY; y++) {
            const child = document.createElement("div");
            child.classList.add("pixel");
            background.appendChild(child);
        }
    }

    const children = Array.from(background.getElementsByClassName("pixel"));

    children.forEach((child) => {
        const rect = child.getBoundingClientRect();
        const { data } = ctx.getImageData(rect.left, rect.top, pixel.size, pixel.size);

        const averageColor = getAverageColor(data);
        const color = `rgb(${averageColor}, ${averageColor}, ${averageColor})`;

        child.style.backgroundColor = color;
        child.style.boxShadow = `0 0 10px ${color}`;
    });
}

function getAverageColor(data) {
    let sum = 0;

    for (let i = 0; i < data.length; i += 4) {
        sum += data[i];
    }


    const averageColor = sum / (data.length / 4);

    return averageColor;
}

const starTXT = new Image(1600, 1600);
starTXT.src = "star.png";

starTXT.onload = resizeCanvas;

window.addEventListener('resize', resizeCanvas);

Another problem is resizing, so that it is optimal and fast, the code lags lots. Any tips? Any different approaches I could take?

the result I aimed for

The current implementation seems to have performance bottlenecks. I suspect the loop in the draw function and the frequent manipulation of the canvas might be causing slowdowns. How can I optimize the code to improve efficiency? The animation speed is crucial for a smooth user experience. Are there any specific techniques or best practices I should follow to enhance the speed of the starfall effect? I’m using a combination of canvas drawing for stars and pixel manipulation for the background. Is this the most optimal approach, or are there alternative methods that could provide better performance?

I’ve already tried some basic optimizations like using requestAnimationFrame instead of setInterval, but I’m looking for more insights and suggestions from the community. Any help in identifying and addressing the performance issues in the code would be greatly appreciated.

Sorry if my code is any messy or unreadable, I’ve tried a lot.

EDIT: the HTML file is underneath

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            background-color: black;
            overflow: hidden;
            /* Prevent scrolling */
        }

        #bkg-content {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            opacity: 0%;
        }

        #bkg {
            width: 100%;
            height: 100%;
            display: grid;
            gap: 3px;
            position: absolute;
            z-index: 2;
        }

        .pixel {
            width: 9px;
            height: 9px;
        }
    </style>
</head>

<body>
    <canvas id="bkg-content"></canvas>
    <div id="bkg"></div>
    <script src="./script.js"></script>
</body>

</html>

I have a drop down list control. I want to display an empty error message if the user does not select any item in the drop down. below is the HTMl markup for the drop down because the actual drop down is in Telerik:

<div class="col-md-6">
                        <label style="font-weight:bold" class="control-label required" for="AwardId">Nominated for these Awards</label>
                        <input disabled="disabled" id="AwardName" name="AwardName" required="required" style="width:100%" type="text" value="" /><script>kendo.syncReady(function(){jQuery("#AwardName").kendoDropDownList({"autoBind":false,"cascadeFrom":"EmployeeNumber","dataTextField":"AwardCategory1","dataValueField":"AwardId","enable":false,"optionLabel":"Select award...","dataSource":{"transport":{"read":{"url":"/AdditionalInformation/Cascading_GetAwards","data":filterAwards},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}}});});</script>
                    </div>

This is the input button at the bottom of the page.

 <input type="submit" value="Submit" class="btn btn-primary"  />

I tried to display the error message this way:

<input type="submit" value="Submit" class="btn btn-primary" onclick="checkValidity()" />

<script>
      function checkValidity()
    {
        
        //const inpObj = document.getElementById("AwardName");
        //alert(inpObj);
        //if (!inpObj.checkValidity()) {
        //    document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
</script>

when I run my code and click on submit button. I dont see any error message.

    function addToTable() {

    const items1 = document.getElementById("items1");
    const selectedOption1 = items1.value;
    const selectedText = items1.options[items1.selectedIndex].text;

    const selectedDate = document.getElementById("date").value;
    const dateControl = document.querySelector('input[type="datetime-local"]');

    const userAmount2 = document.getElementById("userAmount2").value;
    const userAmount3 = document.getElementById("userAmount3").value;
    const userAmount4 = document.getElementById("userAmount4").value;
    const userAmount5 = document.getElementById("userAmount5").value;
    const userAmount6 = document.getElementById("userAmount6").value;
    const userAmount7 = document.getElementById("userAmount7").value;

    const tableBody = document.getElementById("tableBody");
    const newRow = tableBody.insertRow();

    const cell1 = newRow.insertCell();
    cell1.innerHTML = selectedText;

    const cell2 = newRow.insertCell();
    cell2.innerHTML = userAmount2;

    const cell3 = newRow.insertCell();
    cell3.innerHTML = userAmount3;

    const cell4 = newRow.insertCell();
    cell4.innerHTML = userAmount4;

    const cell5 = newRow.insertCell();
    cell5.innerHTML = userAmount5;

    const cell6 = newRow.insertCell();
    cell6.innerHTML = userAmount6;

    const cell7 = newRow.insertCell();
    cell7.innerHTML = userAmount7;

    const cell8 = newRow.insertCell();
    cell8.innerHTML = selectedDate;

    const form = document.getElementById("MyForm")[0];
    form.submit();
    form.reset();
    $('#myForm')[0].reset();
    
    //form.addEventListener("submit", function (event) {
    //  event.preventDefault();
    //});
    // No need for event listener on this, will leave in for possible future thing?
}

function showSuccessCard(){
  const successCard = document.createElement("div");
  successCard.className = "sucess-card";

  successCard.innerHTML = "<p>Record has been saved successfully!<p>";

  setTimeout(function() {
    document.body.removeChild(successCard);
  }, 3000);
}

function saveToDatabase() {
  var formData = $("#MyForm").serialize();
    const tableData = [];
    const rows = document.querySelectorAll("#tableBody tr");
    rows.forEach((row) => {
        const cells = row.querySelectorAll("td");
        const rowData = {
          option1: cells[0].innerText,
          user_amount1: cells[1].innerText,
          user_amount2: cells[2].innerText,
          user_amount3: cells[3].innerText,
          user_amount4: cells[4].innerText,
          user_amount5: cells[5].innerText,
          user_amount: cells[6].innerText,
          date: cells[7].innerText,
        };
        tableData.push(rowData);

        $.ajax({
          type: "POST",
          url: "dcop.inven.php",
          data: tableData,
          success: function(response) {
  
            alert("Your information has been saved");
  
            updateTable(response);
          },
          error: function(error) {
            console.error("Error saving data:", error);
          }
        });

    });
return false;

}

I am trying to save the table no the user inputs. I am new to programming and trying to teach myself but I am stuck on this problem. When I try to have my information to the sql server all it does it take what is in the input fields not the table. I will input multiple items in the table but I only save 1 thing, what is in the user input section. I am sure I am missing something but with me being new to this I am stumped.

I have my Java SSE code using RX

@GET
    @Path("/stream")
    @Produces("text/event-stream")
    @Timed(absolute = true, name = "GET./stream")
    // @formatter:on
    public void getEmitter(@Context SseEventSink sseEventSink, @Context Sse sse, @QueryParam("prompt") String prompt) {
        System.out.println("prompt: " + prompt);
        executor.execute(() -> {
            try {
                for (int i = 0; i < 10; i++) {
                    sseEventSink.send(sse.newEvent("Hello World!" + i + "nn"));
                    Thread.sleep(1000);
                }
            } catch (InterruptedException e) {
                e.printStackTrace();
            } finally {
                sseEventSink.close();
            }
        });
    }

The above code fine if send the get request from POSTMAN -> localhost:9999/ai/notes/stream
i.e The events are getting printed every 1s

But when i do the same get request using EventSourcePolyfill, I do get the message but all the messages are printed after 10s. i.e i cannot see the message as they come to the client. UI code below

sseTest() {
    const authToken = this.localStorageService.get('tokenInfo')['accessToken'];
    const eventSourceInitDict = {
      headers: {
        Authorization: 'Bearer ' + authToken
      }
    };
    const es = new EventSourcePolyfill('/api/ai/notes/stream', eventSourceInitDict);
    const listener = function(event) {
      console.log(event);
    };
    es.addEventListener('open', listener);
    es.addEventListener('message', listener);
    es.addEventListener('error', listener);
  }

I get all the message printed at the end like below:enter image description here

I am trying to build a code to transfer USDT from onw wallet to another using web3js vanilla Javascript. But sometimes it gives an error like low nonce but mostly it gives insufficient fund. Further reading on code i get an assumption that it is due to low balance for gas fees to complete the transaction below is the code i am using to get estimate gas but it is not accurate can anyone help me??

const currentGas = await web3.eth.getGasPrice();
    const requiredGasPrice = await web3.eth.estimateGas({to: toAddress});
    const gas = (currentGas * requiredGasPrice)*2;
    const nonce = await web3.eth.getTransactionCount(pubkey, 'latest');

I tried using higher gas fees sometime it works but i don’t know whta should be exact gas for n numbers of usdt to transfer as it varies.

I’m trying to increase and decrease z-index on button click. For example, I need to increase z-index on the div when I go to the next page (class turn with animation adds), and decrease z-index when I go to prev page (class turn removes):

// ViewBook.vue - template
<div
   class="book__page book__page--right"
   :class="{ turn: pageStates.page3 }"
   :style="calcZIndex('page3')">
   <ViewSomeContact :togglePageState="togglePageState" />
</div>
//...(more pages following)

What I tried to do:

// ViewBook.vue - script
const pageStates = ref({
    page3: false,
    page2: false,
    page1: false,
});

const calcZIndex = page => {
    const index = Object.keys(pageStates.value).findIndex(p => p === page);
    if (pageStates.value === true) {
        setTimeout(() => {
            {
                return { zIndex: 20 + index };
            }
        }, 500);
    } else {
        setTimeout(() => {
            {
                return { zIndex: 20 - index };
            }
        }, 500);
    }
};

const togglePageState = page => {
    pageStates.value[page] = !pageStates.value[page];
};

And then I just provide the calcZIndex, inject in the button component and call it on button click. But it seems like it doesn’t work as intended:

// ItemTurnBtn.vue - template
<template>
    <button class="book__nav-btn" @click="handleButtonClick">
        <slot> </slot>
    </button>
</template>

<script setup>
import { inject } from 'vue';
    const calcZIndex = inject('calcZIndex');
    
    const handleButtonClick = () => {
        playSfx();
        calcZIndex();
    };
</script>

I’m looking for a possible solution. Let me know if you find a way to do it.

I hope, Any senior developer find my question. In starting(3months), I worked basics of react concept in html and js and MUI library. After 9 months I supported for react native development enhancement. But there I feel like some of them work initially start coding. But ours it’s already developed. I just doing write JavaScript functions and logics. I feel like frustrate compare than others. What would heal?

react-native
react
career growth

there is a component duplicated many times in another component. There is a button in this component. How do I change the style of the first component when clicking on it

---

<div>
<Checkbox />
<Checkbox />
<Checkbox />
<Checkbox />
<Checkbox />
<Checkbox />
</div>