Tips for bringing in styles from a .json file to a react component?

I am trying to figure out how to import the width, height, and style properties into a React component. To start, here is an example of a .json document with object properties:

            "manufacturerData": {
                "name": "Duesenberg",
                "articleCount": 0,
                "image": {
                    "file": "duesenberg.jpg",
                    "width": "140",
                    "height": "52",
                    "exists": true
                }
            },

My goal is to import the styles - width and height - into my image card container, which currently looks like this:

  return (
    <Card className='my-3 p-3 thumbnail' style={{ width: '14rem' }}>
      <a href={`/articles/${articles.id}`}>
        <Card.Img src={`/images/${articles.image.file}`} variat='top' />
      </a>
    </Card>
  )

I have been struggling to find a straightforward solution online on how to achieve this. Any help would be greatly appreciated.

javascripthtmlcssreactjs

Answer №1

  return (
    // The default assumption will be 'px' units, but you may include any other unit explicitly
    <Card className='my-3 p-3 thumbnail' style={{ width: articles.image.width }}>
   // <Card className='my-3 p-3 thumbnail' style={{ width: `${articles.image.width}rem` }}>
      <a href={`/articles/${articles.id}`}>
        <Card.Img src={`/images/${articles.image.file}`} variat='top' />
      </a>
    </Card>
  )

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

What is the best way to sort an array of objects based on their properties?

I am working with an array of objects: let response = [{"id": 1, "name": "Alise", "price": 400, "category": 4}]; In addition to the array of objects, I have some arrays that will be used for filtering: let names = ["Jessy", "Megan"]; let prices = [300, ...

javascripttypescript

Managing information retrieved from an asynchronous HTTP request

Here is the script I am using to load an HTML page generated by a node.js server: (function nodeLoader(){ $.ajax({ url: "http://oclock.dyndns.org:8000", method: "get", data: {hk: hk }, success: f ...

javascriptjqueryajax

Having Difficulty with Splicing Arrays in React?

Currently working on learning React and trying to develop my own mini-app. I'm basing it very closely on the project showcased in this video tutorial. I've run into an issue with the comment deletion functionality in my app. Despite searching va ...

javascripthtmlcssreactjsbabeljs

What is the best way to continuously run a series of functions in a loop to create a vertical news ticker effect?

I'm in the process of creating a vertical latest news ticker, and although I'm new to javascript, I'm eager to learn and build it myself. So far, I've come up with this, but I want the news cycle to restart once it reaches the end. ...

javascripthtmlcssloops

What are the steps to utilize an Angular component alongside the ui.bootstrap.modal feature in Angular version 1.5?

Looking to incorporate an angular component with ui.bootstrap.modal using angular version 1.5. Here's what I've tried. Component function MyComponentController($uibModalInstance){ var ctrl = this; ctrl.doSomething = function() { // ...

javascriptangularjsangular-ui-bootstrap

Steer clear of manually inputting URLs in your React components

As I embark on my journey with Gatsby, I am noticing a recurring pattern in my code. A prime example is when creating links, where I often find myself doing something like this: import {kebabCase} from "lodash"; // ... <Link to={`tags/${kebabCase( ...

javascriptreactjsgatsby

Tips on verifying if user x has sent over two messages in the chat and concealing their identity

I have a JavaScript chat application that is causing me some trouble. I recently implemented a feature to display user names on top of messages, and while it works well for the first message, I am struggling to hide the user's name when they send subs ...

javascripthtmlcss

Encountering the "EHOSTUNREACH" error message while attempting to establish a connection to an API through the combination of Axios and Express

Exploring the capabilities of the Philips Hue Bridge API, I delved into sending requests using Postman. To my delight, I successfully authenticated myself, created a user, and managed to toggle lights on and off. Verdict: Accessing the API is achievable. ...

javascriptnode.jsexpressaxiosphilips-hue

Is it possible to switch out all instances of "GET" methods with "POST" throughout the codebase?

While working on a web application, we encountered caching issues with Internet Explorer (caching occurred due to the use of GET requests). The problem was resolved when users turned on "Always refresh from server" in IE's Developers Tool. Although we ...

javascriptajaxxmlhttprequest

Using Javascript to place a form inside a table

When attempting to add a Form inside a Table, only the input tags are being inserted without the form tag itself. $(function () { var table = document.getElementById("transport"); var row = table.insertRow(0); var cell1 = row.insertCell(0); ...

javascripthtml

Assign a specific class to a table row once a checkbox is selected by utilizing states

I am working on a simple table within the parent component, where I pass props to the child component to create rows. My goal is to apply a specific style to rows when the checkbox is checked and remove it when unchecked. All checked rows should have this ...

reactjshtml-tablestatejsx

Jest - Test snapshot failure occurred following the inclusion of "</React.Fragment>"

I encountered an error message while running Jest. As I am not very familiar with using Jest, I would appreciate any insights on why this test is failing. Results: Jest test result: - Snapshot + Received - <span - className="icon icon-dismiss size-2 ...

javascriptreactjstestingjestjs

Display a grid layout containing 5 divs in each row, ensuring that all rows begin and end in the

I need to arrange 5 divs (tiles) on each row in a consistent manner. I attempted to accomplish this by checking for every 5th element and adding an empty div if the count is divisible by 5. However, this approach causes rows to start and end at different ...

htmlcss

A user error is generated when making a call to an Elrond Smart Contract using the JavaScript SDK

I'm attempting to invoke a function from an Elrond Smart Contract to generate an NFT using their JavaScript SDK. Here is the error I encountered: TransactionCompletionStrategy.isCompleted(), found event: signalError Transaction return code: user er ...

javascriptnode.jssmartcontractsnftmultiversx

Arranging cards in a row using HTML or CSS for a dynamic reveal effect

Could someone assist me with my HTML code? I am struggling to figure out why my two cards are not displaying side by side on my webpage. I would also like them to be able to resize based on the size of the page. In the past, I was able to achieve this wi ...

htmlcssmaterialize

Using Ant Design and redux-form-antd for personalized form validation

I have been using the redux-form-antd library and facing some confusion with validation. Specifically, for an Input component, I have implemented the following code: import { Field } from "redux-form"; import { TextField } from 'redux-form-antd' ...

reactjsreduxantd

Timing measurements in JavaScript: comparing Date.now with process.hrtime

I need to regularly calculate the time difference between specific time intervals. When it comes to performance, which method is more efficient: Date.now or process.hrtime? C:\Windows\system32>node > process.hrtime() [ 70350, 524700467 ] ...

javascriptnode.js

Decoding a JSON object in node.js

{"__v":0,"_id":{"$oid":"55f13d34258687e0bb9e4385"},"admin":true,"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d6ded2c3dfd682f3d4ded2dadf9dd0dcde">[email protected]</a>","last_login":"11:25:24 AM","name ...

javascriptjquerynode.js

Tips on getting the Jquery .load() function to trigger just once and executing an Ajax request only once

Upon loading the page, I am utilizing the JQuery .load() function to retrieve content from a PHP file. The content loads successfully but it keeps reloading continuously as observed through Chrome Developer tools. I only want the content to load once. var ...

javascriptjqueryajax

The process of adding an item to the cart fails because the ID is not defined

My attempt to create a functioning add to cart feature is encountering an issue - I keep getting the error message "cart is not defined" when clicking on the "add to cart" button. Can someone please review my code and see if there are any mistakes? Your he ...

reactjsduplicates