title: Passing data back to prop from Axios with ReactJS Rails 6
body: <p>I am fairly new at ReactJS. What I'm trying to do is return the user profile with axios and populate the prop with the attributes. I am using <strong>fast-jsonapi</strong> for retrieving objects from my rails server. It works without issue. Linking ReactJS is confusing me. <strong>How can I set the attributes that I retrieve from axios?</strong></p>
  
  <p><strong>user_profile_card.jsx</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import PropTypes from 'prop-types'
  import axios from 'axios';
  
  const UserProfileCard = props =&gt; (
      &lt;div className="box"&gt;
          &lt;article className="media"&gt;
              &lt;div className="media-left"&gt;
                  &lt;figure className="image is-64x64"&gt;
                      &lt;img src={props.avatar}/&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;div className="media-content"&gt;
                  &lt;div className="content"&gt;
                      &lt;p&gt;
                          &lt;strong&gt;{props.username}&lt;/strong&gt; &lt;small&gt;{props.email}&lt;/small&gt;
                      &lt;/p&gt;
                      &lt;p&gt;
                          Lorem something, something
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/article&gt;
      &lt;/div&gt;
  )
  
  UserProfileCard.defaultProps = {
      avatar: "https://bulma.io/images/placeholders/128x128.png",
      username: "borg",
      email: "borg@hotmail.com"
  }
  
  UserProfileCard.propTypes = {
      avatar: PropTypes.string,
      username: PropTypes.string,
      email: PropTypes.string
  }
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
      ReactDOM.render(
          &lt;UserProfileCard  /&gt;,
          document.getElementById('user_profile')
      )
  });
  
  axios.get('api/v1/profile.json').then((response) =&gt; {
      if(response.data) {
          console.log(response.data['included'][0]['attributes']['email']) // Works
      }
  }).catch(error =&gt; console.log(error))
  </code></pre>
  
  <p><strong>Unable to access data for nested elements below</strong>
  JSON Response</p>
  
  <pre><code>   {data: {…}, included: Array(1)}data: attributes: email: "borg@hotmail.com"username: "borg"__proto__: Objectid: "1"relationships: user_profile: data: id: "1"type: "user_profile"__proto__: Object__proto__: Object__proto__: Objecttype: "user"__proto__: Objectincluded: Array(1)0: attributes: {avatar: null, app_theme: "Dark"}id: "1"relationships: {user: {…}}type: "user_profile"__proto__: Objectlength: 1__proto__: Array(0)__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
  </code></pre>