javascript - Is it possible to pass variable to antD Statistics component in React?

Question

I'm trying to render data from a variable / function into an antD Statistic Component. It appears it can only take a raw string or number, but I need to pass data from props into it.

Is there a way around this? See code below - I would like to pass scenarios[0].investment into "Statistic title="Investment" value={scenarios[0].investment}" but it doesn't allow it. Current code below works AS-IS but breaks when I replace it with scenarios[0].investment

class RenderSummary extends Component {
    state = {
        clicked: false,
        hovered: false,
      };

      hide = () => {
        this.setState({
          clicked: false,
          hovered: false,
        });
      };

      handleHoverChange = visible => {
        this.setState({
          hovered: visible,
          clicked: false,
        });
      };

      handleClickChange = visible => {
        this.setState({
          clicked: visible,
          hovered: false,
        });
      };

    render() {
        const scenarios = this.props.scenarios;
        const data = [
          {
            title: 'Title 1', content: <Statistic title="Investment" value={0}/>,
          },
          {
            title: 'Title 2', content: <Statistic title="T Savings" value={0}/>,
          },
          {
            title: 'Title 2', content: <Statistic title="E Savings" value={0}/>,
          },
        ];
        const hoverContent = <div>This is hover content.</div>;
        const clickContent = <div>This is click content.</div>;
        const onClick = () => console.log("Works!");
        return(
            <div className="container">
              <div className="site-card-wrapper">
                <Row gutter={16}>
                 <Col span={12}>
                    <Card title="User Scenario 1" bordered={true}>
                        <List
                          grid={{ gutter: 16, column: 3 }}
                          dataSource={data}
                          renderItem={item => (
                            <List.Item>
                              {item.content}
                            </List.Item>
                          )}
                        />
                    </Card>
                  </Col>
                </Row>
              </div>
          </div>
        );
    }
}

scenarios in props as follows

"scenarios : [0: {id: 0, investment: 0, tSavings: 0, eSavings: 0 …},1: {id: 0, investment: 1, tSavings: 1, eSavings: 1 …}]"

Answer 1

I think the way you have structured your scenarios array or the way you are passing it is incorrect.

An example of how you could pass scenarios to RenderSummary:

const App = () => {
  const scenarios = [
    {investment: 1}, // Add your other properties
    {investment: 2},
    {investment: 3},
  ]
  return <RenderSummary scenarios={scenarios}/>
}

If you pass scenarios like above, you can pass it in the way you wanted to:

const data = [
  {
    title: "Title 1",
    content: <Statistic title="Investment" value={scenarios[0].investment} />,
  },
  {
    title: "Title 2",
    content: <Statistic title="T Savings" value={scenarios[1].investment} />,
  },
  {
    title: "Title 2",
    content: <Statistic title="E Savings" value={scenarios[2].investment} />,
  },
];