Concatenating props and static values in style={} in React

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



Concatenating props and static values in style={} in React



I have a component I am passing a height as props so it can be used at page level like so (minified code)


<Component style=height />

Component.propTypes =
height: PropTypes.string, //make sure it's a string


Component.defaultProps =
height: "100%", //100% otherwise defined



This can be used later as


<Component height="100%"/>
<Component height="50%"/>
<Component height="20%"/>
...



And renders as


<div class="component-blah-blah" styles="height: 100%;"></div>



I want to add overflow-x: hidden to the party but as a default and non-changeable prop. So that regardless of how they use the styles prop, it will always carry out the overflow-x I defaulted. Like so:


overflow-x: hidden


<Component height="100%"/>
<div class="component-blah-blah" styles="height: 100%; overflow-x:hidden"></div>

<Component height="50%"/>
<div class="component-blah-blah" styles="height: 50%; overflow-x:hidden"></div>

<Component height="20%"/>
<div class="component-blah-blah" styles="height: 20%; overflow-x:hidden"></div>



I know I can concatenate classes in string and props like this using the --> ` <-- and the $ sign, but not with a double bracket as style requires.



I'm looking for the syntax for something like this


className='$classes.myPropClass myCSSclass'



which renders as class="myPropClass myCSSclass" , but for inline styles, not classes...and I can't assing overflow to a class. For other complicated reasons


class="myPropClass myCSSclass"




2 Answers
2



The style prop takes an object. The inner brackets are just the syntax for creating an object inline. So just add the desired property to that object in the render function:


style



const Component = (height) => (
<div class="component-blah-blah" styles=height, overflowX: 'hidden'></div>
);





I need to do the cahnge at component level. I can't recode thousands of existing tables (it's used on a table by the way)
– LOTUSMS
Aug 6 at 16:13






@LOTUSMS Why do you think you need to recode them? Just do that one level higher then. You should add that to your Component render logic of course. And that just once. Every rendering of that component will automatically be affected by that change.
– trixn
Aug 6 at 16:14



Component





The inline style needs to be at a specific level. Either higher or below and the css overflow acts differently. I need to make this change at the component level so it propagates to all the pages where that component is being used
– LOTUSMS
Aug 6 at 16:17





It's not clear what you are trying to achieve. Please do not post just unrelated snippets. You can apply my answer on any level you like. I can't see a problem with that. Just do it in the render() function of the component that should apply the default.
– trixn
Aug 6 at 16:20


render()





Oh wait! I misunderstood you. You meant adding it to the Component where I am declaring the prop, not the Component use in the pages! ...lol. soryy man. Long day and it is only 12PM
– LOTUSMS
Aug 6 at 16:20



The example code you've given doesn't seem to match the description you wrote along with it. You said (emphasis, mine):



So that regardless of how they use the styles prop, it will always carry out the overflow-x I defaulted.



But the code you've put here doesn't show there being a style prop. It just shows there being a height prop. If the user of this component is only given a height prop to use, there's no way that value could ever overwrite your overflowX style property.


style


height


height


overflowX



But... if you're trying to allow the consumer to pass in their own style object in the props, and then ensure that they can't overwrite your desire to implement an overflowX feature, you should use a spread operator to effectively concatenate the user's style, with your style, while keeping your style from being overwritten. It would look something like this:


overflowX


class App extends Component
render()
const styleFromProps = display: 'none' ;
return (
<p
style=
...styleFromProps,
display: 'inherit',

>
Is this displayed???
</p>
);



render(<App />, document.getElementById('root'));



Here is a live example:



https://stackblitz.com/edit/react-spread-operators-in-styles



Notice in this example that the styleFromProps object has a display value of none. But the contents of the <p> tag still display. Because the hardcoded value for display is listed in the style object after the display value that's passed in. In CSS, if an attribute is declared twice, the last one "wins".


styleFromProps


display


none


<p>


display



So if you're allowing the user to pass in a style object as a prop, but you want to ensure that they don't overwrite some of the "critical" styles that you're using, you can do it in this way.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

Creating a leaderboard in HTML/JS