Dynamic social media component w/ dark mode Note: This is my first post for a code review, so any feedback on what other info would be helpful to post (if any) would be much appreciated!
React component: Social.js
The component has an input of 4 properties:

dark: Boolean - if dark is supplied, the component renders white icons for contrast against a dark background
facebook: String - if facebook url is supplied, the component renders the facebook icon, else no icon at all
twitter: String - if twitter url is supplied, the component renders the twitter icon, else no icon at all
instagram: String - if instagram url is supplied, the component renders the instagram icon, else no icon at all

If only 1 social media url is supplied, the text &quot;Follow us on: &quot; is rendered along with the single icon
let count = 0;

function countProp (prop) {
  if (prop !== undefined) {
    if (prop.url !== ``) {
      count++;
    }
  }
  return prop;
}

const Social = props =&gt; {
  count = 0;
  let facebook = countProp(props.facebook);
  let twitter = countProp(props.twitter);
  let instagram = countProp(props.instagram);
  return (
    &lt;&gt;
    &lt;div className=&quot;social&quot;&gt;
      { (count == 1) ? &lt;span&gt;Follow us on:&lt;/span&gt; : `` }
      
      { (!props.dark) ?
                ( (facebook.url !== ``) ? 
                  &lt;a href={facebook.url}&gt;
                      &lt;img src=&quot;./assets/social/facebook.svg&quot; alt=&quot;facebook&quot;&gt;&lt;/img&gt;
                  &lt;/a&gt; 
                  : null )
                : ( (facebook.url !== ``) ? 
                  &lt;a href={facebook.url}&gt;
                      &lt;img src=&quot;./assets/social/facebook_white.svg&quot; alt=&quot;facebook&quot;&gt;&lt;/img&gt;
                  &lt;/a&gt; 
                  : null ) }

      { (!props.dark) ?
                ( (twitter.url !== ``) ? 
                  &lt;a href={twitter.url}&gt;
                      &lt;img src=&quot;./assets/social/twitter.svg&quot; alt=&quot;twitter&quot;&gt;&lt;/img&gt;
                  &lt;/a&gt; 
                  : null )
                : ( (twitter.url !== ``) ? 
                  &lt;a href={twitter.url}&gt;
                      &lt;img src=&quot;./assets/social/twitter_white.svg&quot; alt=&quot;twitter&quot;&gt;&lt;/img&gt;
                  &lt;/a&gt; 
                  : null ) }

      { (!props.dark) ?
                ( (instagram.url !== ``) ? 
                  &lt;a href={instagram.url}&gt;
                      &lt;img src=&quot;./assets/social/instagram.svg&quot; alt=&quot;instagram&quot;&gt;&lt;/img&gt;
                  &lt;/a&gt; 
                  : null )
                : ( (instagram.url !== ``) ? 
                  &lt;a href={instagram.url}&gt;
                      &lt;img src=&quot;./assets/social/instagram_white.svg&quot; alt=&quot;instagram&quot;&gt;&lt;/img&gt;
                  &lt;/a&gt; 
                  : null ) }

    &lt;/div&gt;

    &lt;style type=&quot;text/css&quot;&gt; {
          `
      .social {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
      }

      .social img {
        max-height: 25px;
        margin: 0 15px;
      }

    `
    }
    &lt;/style&gt;
    &lt;/&gt;
    
)};

export default Social;
consider using The strict equality operator (===) over the abstract equality operator (==) , see == VS ===

avoid nested if blocks using optional chaining , it can get pretty messy if you have a lot of nested properties, it's a relatively new feature but you can always use a babel plugin.

consider a different aproach to styling ( i recommend styled-components ), adding styles like that would affect other components on the same page.

since the images urls' are hardcoded , use an object to toggle dark mode

keep your code DRY , you can use an Array of social media names and loop through it to display the icons

for counting the props , you could use Object.keys or if you have other props to pass along the social media icons, use Array.filter to check how many are there and grab the resulting array's length


snippet of the end result :
import styeld from &quot;styled-components&quot;;

const Wrapper = styled.div`
  .social {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
  }

  .social img {
    max-height: 25px;
    margin: 0 15px;
  }
`;

const icons = {
  darkMode: {
    facebook: &quot;facebook_white&quot;,
    twitter: &quot;twitter_white&quot;,
    instagram: &quot;instagram_white&quot;
  },

  lightMode: {
    facebook: &quot;facebook&quot;,
    twitter: &quot;twitter&quot;,
    instagram: &quot;instagram&quot;
  }
}

const options = [&quot;facebook&quot;, &quot;twitter&quot;, &quot;imstagram&quot;];

const Social = props =&gt; {
  // check for dark mode
  const mode = props.dark ? &quot;darkMode&quot; : &quot;lightMode&quot;;

  // count social media icons 
  const count = option.filter(option =&gt; props[option]?.url ? true : false).length();

  return (
    &lt;Wrapper&gt;
      &lt;div className=&quot;social&quot;&gt;
        {/* show the text if there's at least one social media is supplied */}
        {count &gt; 1 ? &lt;span&gt;Follow us on:&lt;/span&gt; : ``}

        {
          // loop through the social media array to display the ones available in props
          options.map(option =&gt; props[option]?.url 
            ? &lt;a href={props[option]?.url}&gt;
               &lt;img src={`./assets/social/${icons[mode].facebook}.svg`} alt={option} /&gt; 
              &lt;/a&gt; 
           : null)
        }

      &lt;/div&gt;
    &lt;/Wrapper&gt;

  )
};

export default Social;