Changing Class Based on Object Properties in React

Question

I wish to do the following in my application: 1) access the the property of color and option from each object 2) check the property 3) give a class based on that property 4) toggle the class onClick

The json object looks like this{

{
        "green": false,
        "other": "third",
        "option" : 2
    },
    {     
        "green": false,
        "other": "third",
        "option": 1
    },
    {
        "green": true,
        "other": "first",
        "option": 5
    }

And so on... Each object will be giving back a number for the key ([0],[1] etc).

My React code is as follows:

class Inf extends React.Component {
    constructor() {
      super();
      this.state = {
        colorData: data
      }
    }
    renderList(data){
      return(
        <ul>{Object.keys(this.state.colorData).map(thing =><li>{thing}</li>)}</ul>
      )
    }
    render() {
      console.log(this.state.colorData)
      return (
        <div>
        <div>{this.renderList(this.state.colorData)}</div>
        </div>
      );
    }
  }
  ReactDOM.render(
    <Inf />,
    document.getElementById('root')
  );

Just for clarification, you want to choose a class based on the colors which are true in the JSON object? So for example, when green is true, there needs to be a class for it? Or do you just want to set green as the class? — theJuls
– theJuls, Commented Dec 31, 2017 at 13:41
Ah I see your confusion. So what I would like to do is set the initial state of the object based on the .json and then will be able to toggle the button to change the the property. I will clarify that. — sacora
– sacora, Commented Dec 31, 2017 at 13:59

luanped · Accepted Answer · 2017-12-31 13:36:25Z

1

Sounds like you can make use of this library: classnames

The Usage section of the readme explains it very well, but basically you can then use it to do something like: const classes = classNames({ classA: colorData.green, classB: colorData.red }) Basically the className on the left hand side will only be applied if the expression on the right hand side is true. And then you can assign the classes to the react className prop

answered Dec 31, 2017 at 13:36

luanped

3,1982 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nirbhaygp Over a year ago

classnames solves the problem, it picks only those keys from object whose values are Boolean(true), and then concatenates them with one space into a string.

thmsdnnr · Accepted Answer · 2017-12-31 13:37:12Z

0

In your renderList function, you can style the li returned by your map with className={desiredClass}.

There are two variables I'm not sure about in your question:

what key you're storing color under in the object
how you determine which class to add based on this color

I assume you use .color and then have a function classBasedOnColor to apply a class name based on this color. You could also use a dictionary with color keys and class name values.

It would look like this:

<ul>{Object.keys(this.state.colorData).map(thing=>{
  const color = this.state.colorData[thing].color;
  const desiredClass=classBasedOnColor(color);
  return <li className={desiredClass}>{thing}</li>
})}</ul>

answered Dec 31, 2017 at 13:37

thmsdnnr

1,30211 silver badges17 bronze badges

6 Comments

sacora Over a year ago

Thanks for your response! Right now the code's key is returning a series of numbers based on the number of the object in the .json as a result I am having a difficult time accessing the information from each property. So what I want to do is if the class returns "true" then the css class for green but the class can be toggled.

thmsdnnr Over a year ago

Hi sacora no problem — I just want to make sure I understand what you're going for. If I understand correctly, the colors could look like this: colors: { green: true, blue: false, red: true } and you would want to add classes for .color-green and .color-red? If so, you can generate your class list like this: Object.keys(colors).filter(key=>colors[key]).map(e=>'color-'+e).join(" ") That gives you color-green color-red for the example object.

sacora Over a year ago

Yes, that would be true for the color properties. In the full .json there is also some properties which are not booleans however which I will also be accessing through a similar method for example type: first type: third or something like that. I will add a non-boolean example to the question so you can see what I mean.

thmsdnnr Over a year ago

The point is to ignore these non-boolean (non-color key) types, correct? If I understand, we are only looking at color properties and ignoring the others. It'd help if you could post a bit more of the JSON, or a bit more code to see what you're going for here.

sacora Over a year ago

Yes, that way it will be more applicable to other parts of the json. The code is the full code but I can expand out the .json. I also realized that i did say specifically color before (as to limit the scope for the example) but to be more accurate I would want to access other information from the object as well.

|

Collectives™ on Stack Overflow

Changing Class Based on Object Properties in React

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related