creation react component for apollo client, simple model with object parameters

Question

I know that react component can be created in two ways, with "extends React.Component" or just object in the component below. My question is , in second way how it's work the parameters, in the example "const ChannelsList = ({ data: {loading, error, channels }})"

if I change the namme 'channel' for xchannels in the 'data' object and then i use to try this new change on "xchannels.map(...)...)" , the page give error:

ChannelsListWithData.js:24 Uncaught TypeError: Cannot read property 'map' of undefined
    at ChannelsList (ChannelsListWithData.js:24)
    at StatelessComponent.render (ReactCompositeComponent.js:44)
    at ReactCompositeComponent.js:795
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821)
    at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:745)
    at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
ChannelsList @ ChannelsListWithData.js:24
StatelessComponent.render @ ReactCompositeComponent.js:44
(anonymous) @ ReactCompositeComponent.js:795
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794
  ....

It's like the function dont accept any variable name. why ?

how it works in react that object, and the name of parameters and the name, there is a link to understand?. Classic programm language like php is simple: function (parameters)

the component:

import React from 'react';
import {
  Link
} from 'react-router-dom'

import {
    gql,
    graphql,
} from 'react-apollo';

import AddChannel from './AddChannel';

const ChannelsList = ({ data: {loading, error, channels }}) => {
  if (loading) {
    return <p style={{color:"red"}}>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="channelsList">
      <AddChannel />
      { channels.map( ch =>
        (<div key={ch.id} className={'channel ' + (ch.id < 0 ? 'optimistic' : '')}>
          <Link to={ch.id < 0 ? `/` : `channel/${ch.id}`}>
            {ch.name}
          </Link>
        </div>)
      )}
    </div>
  );
};

export const channelsListQuery = gql`
  query ChannelsListQuery {
    channels {
      id
      name
    }
  }
`;

export default graphql(channelsListQuery, {
  options: { pollInterval: 10000 },
})(ChannelsList);

The component is from this tutorial:

https://dev-blog.apollodata.com/tutorial-graphql-input-types-and-client-caching-f11fa0421cfd

Answer 1

There's nothing wrong with it.

Classic programming language (like JavaScript) works fine as well.

Side comparison with php, the code works the same :)

In this example, parameters is an object that has both data, and match properties.

You can easily translate it to:

const ChannelDetails(parameters) {
  const { data, match } = parameters
  ...
  // Classic way (like php I presume)
  const data = parameters.data
  const channel = parameter.data.channel
}

Going even further, I recommend you read about object destructuring in JavaScript.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

You have also asked: 'how it's work the parameters.. ?'

These parameters are the component's props you send when you render it. For example:

<ChannelDetails
  data={{ channel: [], loading: false, error: '' }}
  match={"value here"}
/>