React JS alterations in circular word cloud

I have a unique project with a dynamic word cloud feature displaying random words. My goal is to customize the code so that the word cloud can showcase specific words from a list of my selection, like:

let WordList = ['Apple', 'Banana', 'Orange', 'Grape', 'Lemon', 'Cherry']

I attempted to achieve this by modifying the code within the for loop of the cloud function, using wordFromMyList() instead of randomWord(), as shown below.

function wordFromMyList() { 
    let x = WordList[0];
    WordList.shift();
    return x;
}

Unfortunately, my approach did not produce the desired result and the spherical cloud was not formed. I found it puzzling that when I changed the wordFromMyList() function to simply return 'hi', the word cloud displayed 'hi' perfectly. This has left me questioning why the shift operation seems to be ineffective in this context.

Can anyone offer any suggestions or insights?

Answer №1

The issue here is caused by an excessive number of re-renders, specifically 4 in total. By the time these re-renders occur, your MyList has already been shifted more than 16 times and ends up being empty. As a result, your function wordFromMyList consistently returns undefined after the fourth render, leading to nothing being displayed.

To address this issue, utilize the i and j variables within the two loops to retrieve the word from your list using the following method:

function wordFromMyList(i, j) {
    return MyList[i * 4 + j];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I keep encountering an issue with Nodemailer where it keeps throwing the error message "TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument needs to be a string or.."

The error message is incredibly long, but here is a brief excerpt: TypeError [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of Object at PassThrough.Writable.write ( ...

What are some tips for utilizing markers that display location values in the format of a bar chart on Google Maps?

Hey there, I have a project in mind to create a Google map with markers representing specific locations and their values displayed as bar charts. Here is the code snippet from my index page: --index.html-- <!DOCTYPE html> <html> <head ...

What is the best way to logout and remove cookies once the jsonwebtoken has expired?

Seeking guidance on clearing a cookie after the 15-second lifetime of a JWT token. Is this task best accomplished on the server side or can it be managed on the client side? Code snippet with description provided below Utilizing mongoose, a user model is ...

Please upload the image by clicking the "Upload Files!" button instead of relying on the input change

I am looking to enhance my image uploading process by allowing users to upload multiple images after clicking the Upload Files! button, rather than relying on the input change event. Below is the jQuery code I am using (which I found here): index.html &l ...

Creating crawlable AMP versions of Angular websites

Having an Angular website where I dynamically load object properties, I am creating separate AMP sites for each of these objects. Typically, I would link to the AMP site from the canonical site. However, the issue arises because the crawler cannot find the ...

Is there a way to dynamically set the active panel of a JQuery Accordion when making a call?

Currently, I am faced with a scenario where I need to implement a greybox popup window using jQuery Accordion from the main page via links. I am curious to know if it is doable to specify a default active panel for the accordion when calling it. Below is ...

how can I apply a Linear Gradient color to the borderColor within expo react native?

Learn how to apply a linear gradient color on borders I am looking for guidance on using a linear gradient in stylesheet for border color. borderColor:['color1',color2] https://i.stack.imgur.com/oBCeu.png ...

Automatically fill in a text box with previously saved information

Does anyone have suggestions on how to create this type of textbox or what it is called? (View original image here) ...

Rails does not transfer data-attributes in HTML5

I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

Combine a JSON object and a JSON array by matching the value of the JSON object to the key of the JSON array

I am looking to create a JSON array in node by combining two JSON objects and arrays. `var template = { "key1": "value1", "key3": "value3", "key4": "value3", "key6": "Dummy Value1" }; var data = [ { "value1": "1", "value2": "2", ...

Clickable div containing a hyperlink

I need assistance with a clickable div that contains a link. Here is the setup: HTML: <div onClick="goToCat(2);" class="author-topics-block "> <a href="http://mywebsite/page/?cat=2">The woman in steel</a> </div> CSS: .author ...

Not every time you call the AngularJS run method does it actually execute

Working on a simple Angular app, I wanted to implement a user login check and redirection. However, I encountered an issue where accessing the home page from the form site resulted in inconsistent behavior - sometimes redirecting and other times showing ...

AngularJS Constants in TypeScript using CommonJS modules

Let's talk about a scenario where I need to select a filter object to build. The filters are stored in an array: app.constant("filters", () => <IFilterList>[ (value, label) => <IFilterObject>{ value: value, label: label } ]); i ...

What are the best strategies for handling complex task operations in Node.js Express.js?

How can I effectively manage lengthy task functions in Node.js Express.js to prevent timeout errors? Currently, my application includes a time-consuming function that does not require an immediate response but still needs to execute its tasks. How can I en ...

The error "Rollup EMFILE: exceeding file limit with material-ui icons" is appearing due to an

I have implemented a design system based on Material-ui version 5, with rollup as my bundler. Within one of the custom components, I am importing an icon from Mui5 import { Search } from "@material-ui/icons" During the rollup build process, I e ...

Tips for placing a form Dialog in Material UI

I have designed a basic form using https://material-ui.com/ My form consists of two fields: https://i.stack.imgur.com/acGVH.jpg I have included a form Dialog popup that appears when the user clicks on the "Booking name" field. The issue is that my Dial ...

pnpm may not be able to resolve dependencies

When I have my package.json file and install all dependencies with npm i, everything works fine. However, when I use pnpm i, I encounter an exception: TypeError: Cannot read property 'uid' of undefined. I don't actually use this library, so ...

Retrieving Hyperlinks from JavaScript Object for Integration with D3-Created Table

Issue: I'm facing a problem where the HTML link extracted from an Associative Array is treated as a string instead of being applied as a clickable link in the browser. For a detailed visual example and code snippet, visit: http://example.com/code Da ...

What is the best way to add controllers to AngularJS?

What is the best way to troubleshoot this setup? app.js var app = angular.module('app', ['ui.router', 'app.controllers']); /* Why is FooCtrl not being recognized here? */ controllers.js var controllers = angular.module(&a ...