creating custom styling for elements within a map function

Question

creating custom styling for elements within a map function

Within my React application, I am using the map JavaScript function to render a div multiple times. Each element needs to have a specific width set via CSS. The className for each div is unique. Here is how I am rendering the divs:

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

I need to adjust the width of each element based on {item.time}. I attempted to do this in componentDidMount like so:

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');

Unfortunately, this approach did not work as expected and no errors were reported in the console.

javascript jquery css reactjs

Answer 1

Answer №1

Several issues have been identified in your code:

Using the same id for each item in the array, which should be unique.
The purpose of CSS classes is to apply styles to multiple similar elements, not to assign a unique class to each element.
When rearranging items in the array, the CSS class for moved items will change.

However, you can consider using 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 approach helps avoid creating a large number of classes based on person_timeline.length in your CSS.

Answer 2

Several issues have been identified in your code:

Using the same id for each item in the array, which should be unique.
The purpose of CSS classes is to apply styles to multiple similar elements, not to assign a unique class to each element.
When rearranging items in the array, the CSS class for moved items will change.

However, you can consider using 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 approach helps avoid creating a large number of classes based on person_timeline.length in your CSS.

Answer 3

Answer №2

To apply styles to components, you can utilize the style prop.

{
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>)
})
}

Answer 4

To apply styles to components, you can utilize the style prop.

{
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>)
})
}

creating custom styling for elements within a map function

Answer №1

Answer №2

Similar questions

Chart Vue, Component

Reduce the dimensions of a CSS attribute automatically

Having trouble with my React private route, can't seem to get it to function properly

Transitioning images with jQuery

Displaying items as objects in search results in Kendo Angular's auto complete feature

Could one harness the power of SO's script for adding color to code within questions?

Encountering an issue while attempting to utilize the .find() method in Mongoose

What is the best way to eliminate a component from a group using Jquery/Javascript before attaching it to a different component?

How can I use jQuery to pinpoint where my focus currently lies and debug any issues?

Changing the position of a Bootstrap popover dynamically from top to bottom

Searching for substrings in NodeJS using Express

Understanding the complexities of asynchronous programming in node.js

Despite making changes, the React Element continues to be rendered

Creating dynamic HTML elements with bound JSON data

The divs contained are misaligned and not properly centered on the page

What could be the reason for the gtag event not showing up in Google Analytics?

Guide to dividing the screen into three horizontal sections

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Is it possible to create two custom WP queries that both use the same 'rand' parameter with the 'orderby' set to 'rand'?

Incorporating Distinct Items into an Array with JavaScript