Altering the dimensions of a <div> based on the retrieved data

I am currently retrieving data from an API and displaying certain properties using mapping. I would like to adjust the width of the component based on the value of these properties.

<h5>
    <span className="viewcount" ref={boxSize}>
    {`View Count: ${item.statistics.viewCount}`}</span>
</h5>

For instance, if there is a property called "viewcount" in the API item with a value of 200, I want to set the width of this component to be 200px. How can I accomplish this?

By the way, I am working with React.

javascriptcssreactjs

Answer №1

When it comes to defining the default width, 150 is the way to go.
<h5>
    <span className="viewcount" ref={boxSize} style={{width: item.statistics.viewCount===200 ? 200: 150}}>
    {`View Count: ${item.statistics.viewCount}`}</span>
</h5>

However, if you prefer to always use the value of viewCount as the width:

<h5>
    <span className="viewcount" ref={boxSize} style={{width: item.statistics.viewCount}}>
    {`View Count: ${item.statistics.viewCount}`}</span>
</h5>

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

Non-responsive Click Event on Dynamically Created Div Class

I am facing some uncertainty in approaching this problem. In the HTML, I have created buttons with additional data attributes. These buttons are assigned a class name of roleBtn. When clicked, they trigger the jQuery function called roleBtnClicked, which ...

javascriptjqueryhtmlclickjquery-events

When a function is called, retrieve a specific number of elements from an array using the slice method in

If I have an array of 15 objects, but I am only displaying 5 on the browser using this code: const displayedArray = array.slice(0,4) I also have a function that will load another 5 objects each time a user scrolls down. displayedArray.concat(array.slice ...

javascriptarraysreactjs

Having trouble choosing an option from the dropdown menu with Puppeteer Js

I need help with Puppeteer JS to select the initial element in a dropdown. Any suggestions? Once I input the city name in the text field, I want to choose the first option from the dropdown menu. const puppeteer = require('puppeteer'); (async ...

javascriptseleniumpuppeteer

The contents of the div disappear when using jQuery to extract it from a string

Update: I finally uncovered the reason behind the empty content of the #output div. The content is fetched from the server, which takes some time; by the time the document loads, the div remains empty. Does anyone have suggestions on how to extract infor ...

javascriptjqueryquery-string

Utilizing Cookies in an AJAX Request for Cross-Domain Communication with Pure Javascript

I am in the process of developing an Analytics application and I'm seeking a method to uniquely identify each user's device. Currently, my approach involves generating a "cookie" from the server side to track all page clicks and interactions thro ...

javascriptajaxjsoncross-domaincors

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

Tips for personalizing the appearance of a specific date in React Native using the UI Kitten kit

I've been searching everywhere for a solution on how to customize the appearance of selected dates or ranges using React Native Ui Kitten kit, but I haven't had any luck. My goal is to be able to select a particular date or range and have it visi ...

reactjsreact-nativereact-hooksreact-native-ui-kitten

The number of elements in a React prop array is showing as zero

My component called jobs has a prop array that shows in the console, but always returns length:0 I can see three elements in the Image array, but when I try to access the array length through console.log(this.props.jobs.length); Why does the array log ou ...

reactjsecmascript-6

Issues with CSS rendering have been observed following an ajax update when using the <ui:repeat> tag

This scenario is a bit intricate. Essentially, I am utilizing Material Design Lite CSS provided by Google and triggering an AJAX request to dynamically add input fields using PrimeFaces. <h:commandLink value="+ Add something> <f:ajax listener ...

cssajaxjsfmaterial-design-lite

Obtaining Relative Values within Every Iteration using jQuery

I'm currently facing an issue with retrieving relative values within a .each() loop using jQuery. I have a set of table rows that contain a text input and a radio button each. My objective is to iterate through each row and save the value of the text ...

javascriptjqueryloopsforeach

Applying the spread operator in the map function for copying objects

In my Angular application, I am attempting to copy an object and add a new property using the spread operator. To add the new property, I have created a method called 'addNewProperty(name)' which returns the property and its value. However, when ...

javascriptangulartypescriptecmascript-6

Tips for removing the Y-Axis entirely from a CanavasJS chart

I'm working with a canvasJS chart and my goal is to completely hide the Y-Axis. I've managed to remove the Y-Axis line and title in this JSFiddle example. I came across these properties to hide the Y-Axis title and line, but I'm struggling t ...

javascripthtmltypescriptjsfiddlecanvasjs

Issue with React Context: The type 'Dispatch<SetStateAction<GiftsType>>' cannot be assigned to type '(arr1: string[], arr2: string[]) => void'

I'm currently working on a project in React+TS where I need to create a context that takes two string arrays and updates an object's state with these arrays. I keep encountering a title typo error in the setChoices function inside the return stat ...

reactjstypescripttypescript-typingsreact-context

How can the event listener be utilized with md-autocomplete?

I am currently in the process of developing an angularjs application that incorporates an autocomplete feature. One key aspect of this application is that certain fields cannot be populated until an item has been selected using the autocomplete function. ...

javascriptangularjsarraysautocompleteangularjs-material

HTML Techniques: Flipping the Script - Writing Characters from Right to Left

In order to showcase the temperature in degrees Celsius, I have implemented a placement technique using absolute positioning. Consequently, the °C symbol will persist in its designated spot. To achieve the desired presentation, the text should be displaye ...

htmlcss

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

javascriptjqueryhtmlcanvas

Using jQuery AJAX to Redirect to a 404 Page in Case the Load Method Encounters Failure

My website utilizes AJAX to load all pages using the jQuery load method. I modified this tutorial to work with Wordpress. The issue I am facing now is that when the load method encounters an error (such as a 404 due to a broken link), the AJAX transition ...

javascriptphpjqueryajaxwordpress

Requirements for using Angular JS and Node JS

With upcoming projects involving AngularJS and Node.js, I'm a bit apprehensive as I don't have much experience with JavaScript. Should I start by picking up a book on each technology, or is it essential to learn more about JavaScript first before ...

javascriptangularjsnode.js

I encountered an error while using the router: TypeError: Cannot read property 'use' of undefined

Hello everyone, I am new to node.js and seeking help from experts. I am currently working on a code for user synchronization using node.js + AWS Cognito + Facebook Login. I followed an example from this link. Everything was going smoothly until I reached ...

javascriptnode.jsexpressrouter

Having trouble with NVM not working correctly in Ubuntu 21.04 Terminal?

Lately, I've been facing challenges with updating my Node.js version, and one method I tried was using node version manager. After downloading the install_nvm.sh file with the command curl -sL https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/insta ...

javascriptnode.jsnpmnode-modulesnvm