0

In React, is it possible to do smth like that:

<div className={ this.props.value === ??? ? 'foo' : '' } data-value="bar">

I'd like to put the value of data-value instead of ???

UPDATE

just to explain why would I need this.

Let's say this.props.value is an array and I have many divs like this. Now I need to go and check if this.props.value.contains([data-value]).

If there is NO access to data-value I need to change the condition for each element: this.props.value.contains('bar-1'), this.props.value.contains('bar-2'), this.props.value.contains('bar-3')

Improve this question
2
  • from where will you get the value of data-value? Commented Nov 12, 2018 at 13:03
  • it's hardcoded. Commented Nov 12, 2018 at 13:11

2 Answers 2

Reset to default
1

You could do something like this using the ref functionality of react. See:

import React, { Component } from "react";

class Temp extends Component {
  state = {
    dataValue: ""
  };

  constructor(props) {
    super(props);
  }

  getAttributeValue = element => {
    this.setState({ dataValue: element.dataset.value });
  };

  render() {
    const { value } = this.props;
    const { dataValue } = this.state;
    return (
      <div
        ref={this.getAttributeValue}
        className={value === dataValue ? "foo" : ""}
        data-value="bar1"
      >
        {dataValue} Test
      </div>
    );
  }
}

export default Temp;

For a working example take a look at : https://codesandbox.io/s/1qo6vxv8l3

The class is applied. It can be confirmed via the inspector.

Although I think that in your specific case you mention that the data-value will be hard coded so I don't see how

I need to change the condition for each element

will be a pain. So probably doing 

<div className={ this.props.value === {valuePassedAsProp} ? 'foo' : '' } data-value={valuePassedAsProp}>

might be simpler. I would recommend going through this answer for a possible approach.

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

1 Comment

I think this is it. Your answer has both the answer to might question and the suggestion of a better approach. Thanks!
0

This is not possible and not needed because attribute value is available within same function scope as it's used:

<div className={ this.props.value === barVariable ? 'foo' : '' } data-value={barVariable}>

In case this is a common task, helper function can be created:

const classAndDataValue = (valueProp, value) => ({
  className: valueProp === value ? 'foo' : '',
  'data-value': value
});

...

<div {...classAndDataValue(this.props.value, 'bar')}>

The use of data attributes would be applicable to legacy jQuery but isn't suitable in modern JavaScript and React in particular. classnames helper can be used to conditionally construct class string. In case this.props.value is an array:

<div className={classnames({ 'foo': this.props.value.includes('bar') })}>
Improve this answer

4 Comments

Actually, IMO it's needed. Let's say this.props.value is an array and I need to check if it contains data-value. And now I have N of divs like this. I'd need to go and check against each value
Then you can use it as barVariable, as the answer suggests. The thing you intended to do is ok in jQuery but not in modern JS, data attribute is intended for interaction with non-React code. Is there real need for data? If you have problems applying the answer to your case, consider updating the question with your actual code.
Thanks. I have no problem with applying code. In the helper function that you've proviided bar is unknown. I'd just achive the same with { this.props.value === 'bar' ? 'foo' : '' }
'bar' is passed there as an argument, value. But in case this is too complicated, yes, using it directly is reasonable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.