Nipun Ravisara
Nipun Ravisara

Reputation: 4431

How to assign props values to styles

I'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles.

index.js

import React from "react";
import ReactDOM from "react-dom";

import Background from "./background";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Background source="./assets/image.jpg" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

background.js

import React from "react";

const styles = {
  backgroundImage: "url()"
};

export default class Background extends React.Component {
  render() {
    return <div style={styles.background} />;
  }
}

Find the code on below link: codcodesandbox example

Upvotes: 2

Views: 1522

Answers (1)

Eslam Abu Hugair
Eslam Abu Hugair

Reputation: 1208

you can create style object and update the component style prop with it like so:


  render() {
    const style = {
      backgroundImage:`url(${this.props.image})`
    }
    return <div style={style} />;
  }

check this code update

Upvotes: 6

Related Questions