javascript - Unable to acess API data in React-VictoryJs

Question

i am unable to acess API data in Victoryjs charts for some reason, the API is working correctly as if i output the data outside of the chart it shows the data but i cant get it to work inside the chart. My API is outputting data as 2 arrays inside a JSON object. Below is my code, also FYI it isnt throwing any errors.

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          data : [],
          dates: []
        };
    }
    componentDidMount() {
        axios
             .get("http://localhost:8000/api")
             .then(res => this.setState({data:res.data.chartdata, dates:res.data.labels}))
    }  
    render() {
      return (
        <div>
          <h1>Victory Tutorial</h1>
          <VictoryLine data={[{x:this.state.dates, y:this.state.data}]} />          
        </div>
      );
    }
}

export default Main;

question from:https://stackoverflow.com/questions/65948065/unable-to-acess-api-data-in-react-victoryjs

Answer 1

The Data was in the wrong json format, i was serving 2 separate JSON Arrays, what i needed from the API was an array of json objects.