React integration with Rails (basic tutorial failing)

50 Views Asked by At

I'm trying to integrate Victory charts to my RoR application using Shakapacker and React On Rails gem.

I've got the hello world example working, but when I use the code from Victory, I get the following error:

import PropTypes from 'prop-types';
import React, { useState } from 'react';
import style from './HelloWorld.module.css';


import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme, VictoryStack } from 'victory';



const HelloWorld = (props) => {


    const v_data = [
        {quarter: 1, earnings: 13000},
        {quarter: 2, earnings: 16500},
        {quarter: 3, earnings: 14250},
        {quarter: 4, earnings: 19000}
    ];


    return (
        <><div>
                <h1>Victory Tutorial {props.data}</h1>
                <VictoryChart
                    domainPadding={10}
                    theme={VictoryTheme.material}
                >
                    <VictoryAxis
                        tickValues={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]} />
                    <VictoryAxis
                        dependentAxis
                        tickFormat={(x) => (`$${x / 1000}k`)} />
                    <VictoryStack
                        colorScale={"warm"}
                    >
                        <VictoryBar
                            data={v_data}
                            x={"quarter"}
                            y={"earnings"} />
                    </VictoryStack>
                </VictoryChart>
            </div></>
    );
};

export default HelloWorld;

Error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {label, value}). If you meant to render a collection of children, use an array instead.

It seems the error has to do with passing objects as a "react child"? But that's the expected syntax from the docs.

https://formidable.com/open-source/victory/docs/

What am I doing wrong? Please help. I've spent dozens of hours on this already.

0

There are 0 best solutions below