React use component in inline style

Question

I have a component:

class PaddingStyle extends Component {
    constructor( props ) {
        super( ...arguments )
    }

    render() {
        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props.attributes; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
    }
}


export default PaddingStyle;

In another file I am trying to pass what is returned from the component into an inline style of another component:

import PaddingStyle from '../../components/padding/style';

<div 
  style={{
   padding: <PaddingStyle paddingTop={ paddingTop } paddingRight={ paddingRight } paddingBottom={ paddingBottom } paddingLeft={ paddingLeft } />,
  }}
>
</div>

I am using a component for the padding because i have to add the style in multiple places. Is there a better approach for this?

UPDATE

I have found a solution

export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}

"This does not work" is not a precise enough error description for us to help you. *What* doesn't work? *How* doesn't it work? What trouble do you have with your code? Do you get an error message? What is the error message? Is the result you are getting not the result you are expecting? What result do you expect and why, what is the result you are getting and how do the two differ? Is the behavior you are observing not the desired behavior? What is the desired behavior and why, what is the observed behavior, and in what way do they differ? — Jörg W Mittag, Apr 13 '19 at 07:30
You seem to be using a React component just to do string interpolation, and it's not really clear why. Also you don't pass the values as the attributes prop anyway. Just `const paddingStyle = ({ top, right, bottom, left }) => \`${top ? \`${top}px\` : 0}...\`;` would suffice. — jonrsharpe, Apr 13 '19 at 07:36
You don't understand the framework you're using my friend. you aren't returning an element in your react component. this probably raises an exception. If you want a utility function to do this padding style for you.. then make a utility function. ***I would strongly suggest you read the docs on React*** before using it — John Ruddell, Apr 13 '19 at 07:57
@jonrsharpe or to make it more inline ```const paddingStyle = ({ top = 0, right = 0, bottom = 0, left = 0 }) => `${top}px ${right}px ${bottom}px ${left}px`;``` — John Ruddell, Apr 13 '19 at 08:00
@JohnRuddell sure, but then you get `0px` in some places, which the code the OP is showing was trying to avoid. — jonrsharpe, Apr 13 '19 at 08:01
@jonrsharpe Not really since hes still returning `${top} ${right} ${bottom} ${left}` which surmounts to `0 0 10px 0` if bottom was assigned 10. and `0 0 10px 0` is essentially equal to `0px 0px 10px 0px` — John Ruddell, Apr 13 '19 at 08:04
@JohnRuddell it's a little odd to start *"not really"* then go on to agree. I know it's *"essentially equal"*, but it's not identical; I was just following their lead. — jonrsharpe, Apr 13 '19 at 08:09
@jonrsharpe no, I mean it is equal. There isn't a difference except its a minor optimization :) https://stackoverflow.com/a/17819018/2733506 . I get following the OP's lead though! :) — John Ruddell, Apr 13 '19 at 08:11
does my answer below work? please give some feedback, I'm new to answering questions on StackOverflow — KhoaVo, Apr 13 '19 at 08:12
@JohnRuddell I have updated my answer with the right solution — CyberJunkie, Apr 13 '19 at 09:48
@cyberJunkie I'm just answering according to your question, which was unclear as some people pointed out. — KhoaVo, Apr 13 '19 at 09:48

KhoaVo · Answer 1 · 2019-04-13T08:09:30.073

0

I don't see why you need to create a class component just to set the padding. You can just move

const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props;
const top = paddingTop ? `${paddingTop}px` : 0;
const right = paddingRight ? `${paddingRight}px` : 0;
const bottom = paddingBottom ? `${paddingBottom}px` : 0;
const left = paddingLeft ? `${paddingLeft}px` : 0;

into your second component without ever needing to create a separate class component just for setting the padding. Then you can just set the padding directly using the above variables.

<div 
  style={{
   padding: `${top} ${right} ${bottom} ${left}`,
  }}
>
</div

edited Apr 13 '19 at 08:09

answered Apr 13 '19 at 07:34

KhoaVo

376
3
18

A second component is needed because i am adding the padding in multiple components. I don't want to rewrite it every time. – CyberJunkie Apr 13 '19 at 09:26
Then I think you can utilize a global state and pass your padding down to children classes as props. There isn't any need to create a Class component for the purpose of styling. – KhoaVo Apr 13 '19 at 09:41

score 0 · Accepted Answer · answered Apr 13 '19 at 09:49

0

This works:

export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}

It can be used as paddingStyle( props ) in any component.

answered Apr 13 '19 at 09:49

CyberJunkie

21,596
59
148
215

I didn't down vote, but again you're trying to use react incorrectly. You shouldn't be rendering a component for styling purposes like that. It would be better to just call the function and use parameters instead of a component with props. Aka, `style={{padding: paddingStyle({paddingTop: value, paddingBottom: value...})}}`. You could essentially leave the function the same if implemented like that. – John Ruddell Apr 13 '19 at 16:04
@JohnRuddell i'm rendering a component because i am using that padding styling in multiple components. i don't want to edit each one every time i want to make a change to the style. Why is it incorrect if it does the job? – CyberJunkie Apr 13 '19 at 19:13
I understand you are trying to make it dynamic. What im saying is its not a component and it shouldn't be one. Because in React a component returns an element like HTML writtin in JSX. You should make this function a utility function, not a component – John Ruddell Apr 13 '19 at 19:14
@JohnRuddell but isn't that the only way to pass props? I'm not sure how else i could achieve this. I thought a component is declared using `class SomeName extends Component`. What I have is a function, no? :/ – CyberJunkie Apr 13 '19 at 19:16
How are you using it? `` A function can be a component depending on how you're using it. Also i would move it to a utilltiy folder and take out of components just so its clear :) +1 from me! – John Ruddell Apr 13 '19 at 19:17
@JohnRuddell thank you for the +1! I am using it like this in components `paddingStyle( props )`. Yes the "component" folder can cause confusion – CyberJunkie Apr 13 '19 at 19:55
You can make it a lot smaller if you do this ```export default const paddingStyle = ({ top = 0, right = 0, bottom = 0, left = 0 }) => `${top}px ${right}px ${bottom}px ${left}px`;``` – John Ruddell Apr 13 '19 at 21:37

React use component in inline style

2 Answers2