How to change a style of an element in React.js in onClick function

Question

I am trying to change the color of list elements in my conditional rendering in react.js.

onClick={exist ? () => {this.handleClick(); this.props.updateSummary(store_id)} : null }

I want to have style="color :#E8E8E8" and not :null. It seems like I can not use inline styling in onClick function while doing conditional rendering. Any ideas how to do it? Thank you

<ul>
   {this.props.stores.map(({exist, store_id}) => (
      <li className ="storeIdList" onClick={exist ? () => {this.handleClick(); this.props.updateSummary(store_id)} : null }>Store Id: {store_id}</li>
   ))}
</ul>

Just... where is the styling here? Nothing about a `className` or a `style` attribute... — sjahan, Sep 28 '20 at 13:54
@PankajShukla if exists I want `this.handleClick(); this.props.updateSummary(store_id)` this functions to run, if not : then change the style. Thank you — Nitsa, Sep 28 '20 at 14:03
@sjahan, I want to add style in the place of :null and I don't know how to do it. — Nitsa, Sep 28 '20 at 14:04
Does this answer your question? [Correct way to handle conditional styling in React](https://stackoverflow.com/questions/35762351/correct-way-to-handle-conditional-styling-in-react) You must use `className` or at least `style` you can't do this in `onClick`. `onClick` will trigger a change in, let's say, your `state` and this state will be used to pick a CSS class or a style value. — sjahan, Sep 28 '20 at 14:14
@sjahan, thank you. The problem is, if I do `onClick={exist ? () => {this.handleClick(); this.props.updateSummary(store_id)} : style={color:"something"}` it gives me error: assignment to undeclared variable style. Same with className. — Nitsa, Sep 28 '20 at 14:23
You can handle the style change in the onclick handler. You cannot specify style change as style=something as onClick's function definition. style is an attribute of the element and if you say style=something on onClick outside the handler definition, it doesn't know what to do. That is why it is throwing error. You can check the solution here https://codesandbox.io/s/react-playground-forked-cs31e — ebiv, Sep 28 '20 at 14:55

score 0 · Answer 1 · answered Sep 28 '20 at 13:53

0

Create two Css classes, and with your ternary put the right class

answered Sep 28 '20 at 13:53

jibeeeee

152
2
17

Pankaj Shukla · Accepted Answer · 2020-09-28T14:28:45.267

You can modify your code to have style like this:

<li
        style={!exist ? { color: "#E8E8E8" } : { color: "blue" }}>
        
</li>

Here it will take care of the case where you want the color to be changed to what you mentioned. When the item does exist then you can change the part where it is right now making the color blue as in { color: "blue" }.

Take a look at this link for complete example: https://codesandbox.io/s/admiring-silence-57isz?file=/src/App.js

What this means is that you have to provide all the properties as an object in the part after :. In other words copy the properties defined in class storeIdList in the else part of the conditional expression.

Note: You cannot do what you want in onClick handler as that is for click handler callback and NOT to change the styles.

How to change a style of an element in React.js in onClick function

2 Answers2