Set props dynamically in React Components

Question

I am trying to set props in a React Component only if they are given in the array of object that is recieved, something like this:

This component works:

const like_content = 
    <div>
      Total likes: <b>52</b>
    </div>
<Card cols={2} dark centeredBody centeredHeader title="Likes" subtitle="Total likes in your posts" content={like_content} />

But I want to set the

dark / centeredBody / centeredHeader

properties in a map function when these are in a array like this:

statistics: [
        {
          title: 'Likes',
          subtitle: 'Amount of likes on facebook',
          content: 58,
          props: ['dark', 'centeredHeader'] // <-- HERE
        },
        {
          title: 'Share',
          subtitle: 'Amount of Share on facebook',
          content: 58,
          props: ['dark'] // <-- HERE
        },
        {
          title: 'People reached',
          subtitle: 'Amount of people who saw you on facebook',
          content: 58,
          props: ['centeredHeader'] // <-- HERE
        }
      ]

I tried this, but of course not worked:

{this.state.statistics.map((card, index) => {
              return (
                <Card 
                  key={index}
                  cols={3} 
                  title={card.title} 
                  subtitle={card.subtitle} 
                  content={card.content}
                  {card.props.map(prop => {
                    return prop;
                  })}
                />
              );
            })}

The comonents were created successfully but I cannot set the props that I mencioned

Answer 1

You could create an object from your array, where every element in the array becomes a key with the value true in the object, and then spread this object on the component:

{this.state.statistics.map((card, index) => {
  const propsObj = card.props.reduce((result, prop) => {
    result[prop] = true;
    return result;
  }, {});

  return (
    <Card
      key={index}
      cols={3}
      title={card.title}
      subtitle={card.subtitle}
      content={card.content}
      {...propsObj}
    />
  );
})}

Answer 2

properties are key value pairs so you need a key and a value.

Can you just pass all the props down to the Card and let the Card handle the props?

https://codesandbox.io/s/84xv754y8j

 import React, { Component } from "react";

class Card extends Component {
  render() {
    return (
      <div>
        I am a card that has{" "}
        {this.props.props.map(property => "(" + property + ") ")}
      </div>
    );
  }
}
export default Card;

//Other Class
return (        
      {statistics.map((card,index)=>{
        return <Card 
          key={index}
          cols={3}
          title={card.title}
          subtitle={card.subtitle}
          content={card.content}
          props={card.props}/>
      })}