setting css specific to element in map function

Question

I am rendering a div multiple times by using map javascript function in my react application. I want to set css (width) of each element. Width will be element specific. I am rendering div like this

    {this.props.face_clicked_reducer.person_timeline.map((item, i) => (
             <div className= {`marker-item-${i}`} id="sele1"></div>
          ))
    }

className of each div is different. How can I set css of each element. For setting width I will be needing {item.time} reference.

I tried setting it in componentDidMount like this

this.props.face_clicked_reducer.person_timeline.map((item, i) => (
            $("<div className= {`marker-item-${i}`}></div>").css({
                "width": ((item.endTime - item.startTime) * (100/this.props.player_time_update_reducer.video_duration)) + '%',
                "left": ((item.endTime) * (100/this.props.player_time_update_reducer.video_duration)) + '%'
            })

    )).css('backgorund', 'red')

But it didn't work. I am not getting any errors in console.

Tip: Please avoid using jquery with React. React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. There are ways, so that you can use other plugins(like jqeury) but I personally don't like it or recommend it. — Raghav Garg
– Raghav Garg, Commented Sep 5, 2017 at 10:37
I agree, But a lot of libraries are just in jquery and to make webpage look good I end up using jquery. — EdG
– EdG, Commented Sep 5, 2017 at 10:40
@RaghavGarg, while you cannot use jQuery in the fashion demonstrated in OP's code (because it returns a DOM element, not a ReactComponent), there are many valid use-cases of jQuery with React. Such as animations or inline-styling. Even certain DOM manipulations can be done without having "smelly code". — Chris
– Chris, Commented Sep 5, 2017 at 11:06

Chris · Accepted Answer · 2017-09-05 10:39:57Z

1

There are a few issues with your code:

You are using the same id for each item in the array. IDs need to be unique.
The idea of css classes are to select multiple similar elements and not to have a unique class for each element.
If you re-arrange the items in the array, the css-class for the moved items will change.

That said, you could do apply an inline-styling instead:

this.props.face_clicked_reducer.person_timeline.map(
  (item, i) => <div style={{width: (50 * i) + "%", height:(20 * item.time) + "%"}}></div>
);

Alternatively:

this.props.face_clicked_reducer.person_timeline.map(
  (item, i) => {
    let s = {
      width: (50 * i) + "%",
      height: (20 * item.time) + "%"
    };
    return <div style={s}></div>;
  }
);

This prevents you from defining person_timeline.length number of classes in your css.

edited Sep 5, 2017 at 10:39

answered Sep 5, 2017 at 10:34

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

Comments

bennygenel · Accepted Answer · 2017-09-05 10:43:07Z

0

You can use style prop for styling components.

{
    this.props.face_clicked_reducer.person_timeline.map((item, i) => {
        const style = {
            width: ((window.innerWidth * 0.2) * i),
            height: ((window.innerHeight * 0.2) * item.time)
        }
        return (<div className={`marker-item-${i}`} style={style}></div>)
    })
}

edited Sep 5, 2017 at 10:43

answered Sep 5, 2017 at 10:32

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

2 Comments

EdG Over a year ago

I want values in percent. I am not sure if style attribute can set dimentions in percent.

bennygenel Over a year ago

You can use window.innerWidth and window.innerHeight and calculate the desired percentage I think.

Collectives™ on Stack Overflow

setting css specific to element in map function

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related