8 Files - Part E: Prop spreading is forbidden

[DaleMcGrew]

We just upgraded to the latest version of AirBNB ESLint rules. We have quite a few files which are violating the "Prop spreading is forbidden" rule. These are the ones to work on for this Issue.

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/Ballot/Ballot.jsx
1116:23 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/Intro/Intro.jsx
73:23 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/Intro/IntroNetwork.jsx
85:19 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/Settings/Location.jsx
82:25 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/TwitterHandleLanding.jsx
145:46 error Prop spreading is forbidden react/jsx-props-no-spreading
149:40 error Prop spreading is forbidden react/jsx-props-no-spreading
153:13 error Prop spreading is forbidden react/jsx-props-no-spreading
162:37 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/Vote.jsx
472:191 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/VoterGuide/OrganizationVoterGuideCandidate.jsx
142:13 error Prop spreading is forbidden react/jsx-props-no-spreading

/Users/dalemcgrew/PycharmProjects/WebApp/src/js/routes/VoterGuide/VerifyThisIsMe.jsx
273:31 error Prop spreading is forbidden react/jsx-props-no-spreading

An example of what needs to be changed is in the file /src/js/components/Connect/CurrentFriends.jsx (Please don't work on this example -- only the files above.):

<FriendDisplayForList {...oneFriend} />

In this case, we are passing a dict oneFriend with several values into FriendDisplayForList, and relying on the ... to break up these variables and pass them individually into FriendDisplayForList. Within FriendDisplayForList, we take in these props, all of which come from the oneFriend dict:

FriendDisplayForList.propTypes = {
  linked_organization_we_vote_id: PropTypes.string,
  mutual_friends: PropTypes.number,
  positions_taken: PropTypes.number,
  voter_we_vote_id: PropTypes.string,
  voter_photo_url_large: PropTypes.string,
  voter_email_address: PropTypes.string,
  voter_display_name: PropTypes.string,
  voter_twitter_handle: PropTypes.string,
};

What we need to do are the following steps:

1. Start with file with the root error, ex/ CurrentFriends.jsx (see the list at the start of this issue for the ones for you to work on)
2. Find the line with the ESLint error and identify the component we are passing the object into (ex/ <FriendDisplayForList).
3. Search the code base for other instances of that object.
4. Go into that component and find .propTypes which shows with variables are being brought into the component. Some of them will be from the incoming object (ex/ oneFriend), but some of them may be unrelated.
5. Convert the variables in the propTypes code to camel case (ex/ instead of linked_organization_we_vote_id change it to linkedOrganizationWeVoteId)
6. Add incoming variables on the component we are passing the object into. Ex:

<FriendDisplayForList 
  linkedOrganizationWeVoteId={oneFriend.linked_organization_we_vote_id}
  mutualFriends={oneFriend.mutual_friends}
  etc...
/>

7. Delete the object being "spread"/passed into the component (i.e., oneFriend from <FriendDisplayForList {...oneFriend} />)