pass array of objects to react component

Question

I created a progress bar component that takes props like color, height, value and max. Right now it shows one sigle progress bar and i am trying to group progress bar and group them by color. Here is my component

const ProgressBar = ({
  heightSize,
  value,
  max,
  ...customProps
}) => {
  const classes = classNames([
    'my-ProgressBar',
    { [`my-ProgressBar--${heightSize}`]: heightSize },
    customProps.className,
  ]);

  const normalizedValue = (value / max) * 100;

  return (
    <progress
      {...customProps}
      style={{ color: customProps.color }}
      className={classes}
      max={100}
      value={normalizedValue}
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={normalizedValue}
      tabIndex="-1"
    />);
};

I am trying to update this component so that if i pass an array to this component, it'll return grouped progress bar. Here is one of my failed attempts.

const ProgressBar = (groups) => {
        const GroupProgressBar= groups.map((group) => (
        <div key={group.color}>
          color: {group.color},
          heightSize: {group.height},
          value: {group.value},
          color: {group.color}          
        </div>
      ));
            return (
              <progress
                {...customProps}
                style={{ color: group.color }}
                className={classes}
                max={100}
                value={normalizedValue}
                aria-valuemax={100}
                aria-valuemin={0}
                aria-valuenow={normalizedValue}
                tabIndex="-1"
              />);
        });

How do i udpate my component so it will work on groups?

grouped progress bar means, each progress bar for array element correct? — Mayank Shukla
– Mayank Shukla, Commented Jul 12, 2017 at 18:23

Mayank Shukla · Accepted Answer · 2017-07-12 19:20:41Z

2

First use map to create progress bar for each entry of array, then return from the component.

Write it like this:

const ProgressBar = ({groups, heightSize}) => {

    let heightSize = 10;   /*calculate here*/

    const GroupProgressBar = groups.map((group, i) => (
          <progress
              key = {i}
              {...customProps}
              heightSize = {heightSize}
              style={{ color: group.color }}
              className={classes}
              max={100}
              value={group.value}
              aria-valuemax={100}
              aria-valuemin={0}
              aria-valuenow={normalizedValue}
              tabIndex="-1"
          />
        )
    )

    return <div> {GroupProgressBar} </div>
}

Check the DOCs for more details.

Update:

See we can pass any no of props from parent component, props is an object that contains all the data. In functional component, we need to write it like this:

const ProgressBar = (props) => {
    console.log(props);
}

Here props will contain all the data and method passed, you can access any passed value by props.keyName, pass the height and groups from parent and access them by props.groups and props.height.

Another way is:

const ProgressBar = ({groups, heightSize}) => {
    console.log(groups, heightSize);
}

this is nothing but the object destructuring, now we can use these values directly by groups and heightSize.

Note: Assign the unique key to each progress bar inside map, i used item index but that is not a good way, so assign some unique value from group object.

edited Jul 12, 2017 at 19:20

answered Jul 12, 2017 at 18:25

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

9 Comments

User7354632781 Over a year ago

Thanks for the help. i am deriving heightSize based on the value passed. I have a class .my-ProgressBar in css. so based the height small, medium, high i am getting the bar size. How can i do that?

Mayank Shukla Over a year ago

sorry didn't get that, you want to calculate the height for each entry or it will be fixed for all the array entries?

User7354632781 Over a year ago

np. It'll be fixed for all the array entries. Thanks for asking that question, that cleared one of question :)

User7354632781 Over a year ago

Thanks. Can we make heightSize as separate prop so the existing css class will return the size based on what user pass?

Brandon Over a year ago

don't forget to set key property on those progress components.

|

Collectives™ on Stack Overflow

pass array of objects to react component

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related