0

I am trying to make a client request for an array saved on a server, passing down the data by passing React props. However I receive the error

Warning: Failed propType: Invalid prop children supplied to App, expected a single ReactElement.

Can you help tell me when I would receive this error?

I define the propType in the route:

Home.propTypes = {
 home: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string,
  })).isRequired,
};

Then an async action function requests the data and waits for a response.

async action() {
    const resp = await fetch('/graphql', {
      method: 'post',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query: '{home{title}}',
      }),
      credentials: 'include',
    });
    const { data } = await resp.json();
    if (!data || !data.home) throw new Error('Failed to load the news feed.');
    return <Home {...data} />;

The HomeItemType definition:

import {
  GraphQLObjectType as ObjectType,
  GraphQLString as StringType,
  GraphQLNonNull as NonNull,
} from 'graphql';


const HomeItemType = new ObjectType({
  name: 'HomeItem',
  fields: {
    id: { type: StringType },
    name: { type: StringType },
  }
});

The data query on the server (As simple as possible for now):

import HomeItemType from '../types/HomeItemType';
var data = require('./home.json')

let items = [];

const home = {
  type: new List(HomeItemType),
  resolve() {
    items = JSON.parse(data);
    return items;
  }
}

export default home;
dwigt
  • 611
  • 1
  • 8
  • 18
  • Looks like you are rendering the returned Home component as a return value from a function in your App component. Can you please post your App component? – Ashish Chaudhary Aug 18 '16 at 03:52
  • 1
    Hi Ashish, Thank you for taking the time to read through my question. I was using a React starter Kit (https://github.com/kriasoft/react-starter-kit) but I have since started from scratch because I was getting out of my depth and I do not even know which function in the App component would be relevant. Thank you for taking the time though! I will look at this again at some point to figure out my errors, but for now it probably is too much work for me and probably anyone else :) – dwigt Aug 23 '16 at 04:45

0 Answers0