CODEWITHSUNDEEP
javascriptreactjsjsx
User7354632781
User7354632781

Reputation: 2274

pass array of objects to react component

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?

Upvotes: 1

Views: 15642

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104529

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.

Upvotes: 2

Related Questions