Nothing was returned from render when calling async function in component

Question

Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Adding console logs shows that I cam getting the data I want, so I know my calls are good, but I'm wondering if I'm using the async stuff wrong or just react in general.

All the examples I've found of this patter use render() but I don't think I need that in a functional component.

getCoinsByBuzz.js

import axios from "axios"

export async function GetCoinsByBuzz() {

     try {
        const res = await axios.post('http://localhost:8000/graphql', {
            query: `query MyQuery {
            coinByBuzzChange {
              coinName
              symbol
              data
            }
}`
        });
        return res;
    } catch (err) {
        console.log(err);
        return await Promise.reject(err);
    }
};

lineChart.js - ignore the data logic, I have some dummy data in there while I get things right so there are some other things wrong here.

import * as React from "react"
import { Line } from "react-chartjs-2";
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
} from "chart.js";
import { GetCoinsByBuzz } from "../hooks/GetCoinsByBuzz"


ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

export const LineChart = () => {

    GetCoinsByBuzz().then((response) => {

        const fulldataset = response.data.data
        const dataset = fulldataset.coinByBuzzChange.slice(0, 10)

        const data = {};
        data.datasets = [];

        const colors = [
            'rgb(26, 188, 156)',
            'rgb(230, 126, 34)',
            'rgb(231, 76, 60)',
            'rgb(52, 152, 219)',
            'rgb(52, 73, 94)',
            'rgb(149, 165, 166)',
            'rgb(179, 55, 113)',
            'rgb(252, 66, 123)',
            'rgb(189, 197, 129)',
            'rgb(214, 162, 232)',
            ]

        var colorPicker = 0

        const labels = new Set()
        dataset.forEach(element => {

            const label = element.coinName;

            const elementDataSet = new Array()

            const keys = Object.keys(JSON.parse(element.data))

            const elementDataJson = JSON.parse(element.data)

            keys.forEach(key => {
                elementDataSet.push(elementDataJson[key].buzzScore)
            })

            data.datasets.push({

                data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}],
                borderColor: colors[colorPicker]
            });

            colorPicker += 1

        });

        console.log(data)

        return (
            <div style={{ width: '750px' }}>
            <Line data={data} />
            </div> 
        );
    })
};

export default LineChart;

index.js

import * as React from "react"
import Layout from "../components/layout"
import Seo from "../components/seo"
import {LineChart} from "../components/LineChart"

const IndexPage = () => (
  
  <Layout>
    <Seo title="Home" />
    <LineChart></LineChart>
  </Layout>
)

export default IndexPage

I can't seem to figure out what I'm doing wrong here. Could I please get some direction please?

I'm very new to react, and I'm just figuring it out as I go.

You have your return inside of a `.then`, you need to return stuff in the top level. Use `useState` and `useEffect` to make this work — Samathingamajig, Jan 30 '22 at 21:43
Re edit. They are called [Function Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components). They are (generally) not [functional](https://en.wikipedia.org/wiki/Functional_programming). And see the second duplicate question which is specifically about function components. — Quentin, Jan 30 '22 at 21:55

Nothing was returned from render when calling async function in component

0 Answers0