将道具传递给嵌套对象-React.js

Question

I am trying to pass props to the different fields below to populate a chart. However, I get this error from React when it attempts to render:

Parsing error: Unexpected token, expected ","

Here is my code:

function BarChart(props) {
        return (
            <Bar
                data={{
                    labels: [{props.chartTitle}],
                    datasets: [
                        {
                            label: {props.timeFrames},
                            backgroundColor: {props.chartBGColor},
                            data: {props.data}
                        }
                    ]
                }}
            />
        )
}
export default BarChart;

When I pass props like this, I don't get the error. I just don't get the chart rendered correctly.

function BarChart(props) {
            return (
                <Bar
                    data={props.data}
                />
            )
    }
    export default BarChart;

Answer 1

The wrapping curly braces around the props values are invalid. You need to remove them, or add keys if they are intended to be objects:

function BarChart(props) {
  return (
    <Bar
      data={{
        labels: [props.chartTitle],
        datasets: [
          {
            label: props.timeFrames,
            backgroundColor: props.chartBGColor,
            data: props.data
          }
        ]
      }}
    />
  );
}