Setting the background using parameters in ReactJS is a powerful technique for customizing

Can someone assist me with setting a background for a div using react js, where I pass the background URL as a parameter?

This is the main functionality.

function Main (){
    return (
        <main className="Main">
            <List BGimage={"./20180820_192057.jpg"}/>
        </main>
    )
}

// I am looking to pass BGimage as a parameter to set my background image

import React, { Component } from 'react';

export class List extends Component{
        render() 

        return (
            <div>
                <div>
                    <div ClassName="BackGround" style={{backgroundImage: this.props.BGimage}}>
                    </div>
                </div>
            </div>
        )
    }
}

export default List

Answer №1

Your code looks good, but remember to include the URL just like in CSS.


return (
        <div>
            <div>
                <div ClassName="BackGround" style={{backgroundImage: `url(${this.props.BGimage})`}}>
                </div>
            </div>
        </div>
    )
}

I apologize for any language barrier, I hope this explanation helps.

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

Braintree drop-in feature now allows for automatic disabling of the submit button while the transaction

I've been struggling with a seemingly simple task that I just can't seem to figure out. I'm using Braintree's dropin UI and I have a submit button that I need to disable while the processing is happening, but I can't seem to find t ...

Create a seamless typing effect in JavaScript that loops indefinitely

I've managed to tweak this code I stumbled upon to almost perfectly fit my needs, except for one thing - it keeps looping. I just want it to type "zero", delete it, and then type "one" before stopping. I've tried making some adjustments here and ...

Creating and downloading a Word document with Node.js by utilizing officegen

Recently, I've been trying to utilize the officegen npm module in order to generate a word (docx) file and then download it. Previously, I relied on the tempfile module to create a temporary path for the purpose of downloading. Below is the code snipp ...

What could be causing the invalid expression error to pop up in my Vue.js template?

I encountered an error within my vue single file component: Errors compiling template: invalid expression: Unexpected token { in {{ jobs[0].build_link }} Raw expression: v-bind:href="{{ jobs[0].build_link }}" The complete code causing the is ...

Each column has its own scroll bar, making use of 100% of the available space within a container that is 100%

I am attempting to create 3 columns, each with its own scroll bar, while also taking up 100% of the available space. However, I am facing issues where there is either no scroll bar present or the columns are not occupying 100% of the available space. It ...

Pass on the error to the callback in Node.js

Here is the code snippet in question: User.findById(id, function(err, user) { //blah blah }); The findById method can be found within the User module. Here's a glimpse at its implementation: exports.findById = function(id,callback) { connec ...

The issue with Angular's ng-click directive failing to function properly in Internet Explorer 11

I'm facing a strange issue with a basic ng-click function that is functioning properly in all browsers except for IE10 and 11 (I haven't had a chance to test it on Edge yet). Below is the directive I am using: $scope.showMoreDetails = false; ...

The DataGrid is only displaying a single result instead of multiple results

I'm having difficulty displaying all the results in this MUI data table. Currently, it is only showing one result instead of all, and I can't figure out what I'm doing wrong. If you have any suggestions or best practices on how to properly ...

Using the CSS property hyphens: auto does not function properly for certain words

Could someone shed light on why the word "Sustainability" is not being correctly hyphenated in the following code snippet? I have tested it in multiple browsers like Google Chrome, FireFox, and Safari, and none of them seem to hyphenate the word, ...

Issue with React component not updating content after state changes in Next.js framework

Currently, I am facing an issue with my Header component not updating its content on state change. The goal is to show the user's Profile once the state changes, but unfortunately, it does not update immediately; it only changes after a page refresh o ...

Creating a web form with HTML and integrating it with jQuery AJAX

Looking to fetch data from the server through jQuery AJAX on an HTML form and store the response in a PHP string variable. Here is my current code snippet: <form method="post" name="myform" id="myform" action="https://domain.com/cgi-bin/cgi.exe"> &l ...

Transforming JSON information for Google chart data table

I am currently working on converting JSON data into a suitable format for a Google Chart visualization: var jsonData = {"Battery Voltage, (A)": {"2017-11-11T00:00:00.000Z":12.3, "2017-11-11T00:01:00.000Z":12.35, ...

Having trouble with installing Angular JS on my computer

On my machine, I have successfully installed node.js version v0.12.0. However, when attempting to run sudo npm install, I encountered the following errors: npm ERR! install Couldn't read dependencies npm ERR! Darwin 14.0.0 npm ERR! argv "node" "/usr/ ...

Controlling the Size of Images

I am currently dealing with a significant issue related to saving bandwidth and storage. My website (built on PHP/Laravel) features 5-6 different image sizes in the desktop view. Whenever a user uploads an image, I am required to save 7 versions of that i ...

Struggling with AJAX requests in a cordova/ratchet app for mobile devices

I encountered some challenges when trying to make an AJAX request in my cordova project. $.ajax({ url: "https://mydevserver/REST.php?method=mobileGetData", success: function(result){ alert("successful ajax"); }, error: function(xhr ...

Firebase functions are producing null values when called

I'm encountering an issue where the Functions function is returning null when I call it to retrieve user information. Can you provide a solution? workspace/functions/src/index.ts exports.getUser = functions.https.onCall((data, context) => { adm ...

Incorporating a <script> tag in Angular 8 to reference an external JavaScript file from a different website

I am currently using Angular 8 and its CLI to develop my website. Issue: I need to include an external JavaScript file from a different website by adding a <script> tag, for example: <script src="https://www.wiris.net/demo/plugins/app/WIRISplugin ...

Using Vue.js with typeahead feature: the missing link

I'm currently working on creating a form with autocomplete functionality. The goal is to have a user input part of a name, which will then trigger suggestions from our database. Upon selecting a suggestion, I want the entire form to be populated with ...

Guide: Playing an audio file stored on your device using Tauri

I'm currently developing an mp3 (audio) player using Tauri and Vue.js. Despite trying various solutions, none of them seem to work for me. The player is implemented with a simple video tag : <video ref="video" :key="queryUrl" ...

Encountered a TypeScript typing error when retrieving data from the Pinia state to populate the template

Having a type error when trying to pass data from the Pinia store to a child component's input field using TypeScript - Error message: 'Property 'storeForm' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $prop ...