title: How to use MediaQuery from react-responsive to hide only one JSX attribute?
body: <p>A button element that contains a <strong>Profile Picture</strong> and the <strong>Info</strong> which is the first-name and the last-name. What I want is to hide only the <code>profileImageProps={profileImageAndBasicInfoProps.profileImageProps}</code> which is the profile picture when the screen size is smaller than 768px. I have wrapped the button element with the <code>MediaQuery</code> tags from react-responsive. But it will of course hide the whole element.</p>
  <blockquote>
  <p>Code below:</p>
  </blockquote>
  <pre><code>&lt;MediaQuery minWidth={768}&gt;
                  &lt;button className=&quot;btn btn-link&quot; onClick={onUserClick}&gt;&lt;ProfileImageAndBasicInfo     
                    profileImageProps={profileImageAndBasicInfoProps.profileImageProps}
                    basicInfoProps={profileImageAndBasicInfoProps.basicInfoProps}
                    data={{
                        firstName: props.user.attendee.first_name,
                        lastName: props.user.attendee.last_name
                      }}/&gt;
                  &lt;/button&gt;
  &lt;/MediaQuery&gt;
  </code></pre>