Why are my icons being placed as a column instead of as a row?

user_10426693 0
Viewed 179

I am trying to align these icons as a row using className="col s1" but when I run this code its displayed in a column for some reason. I've tried removing the container tag, adding it, ive tried changing the column sizes, but for some reason it is always displayed as a column instead of as a row.

Is there any way i can get this to work?

Here is a link to the code: Project

Main.jsx

import React, { useState, useEffect, useRef } from "react";
import Helmet from "react-helmet";
import Socials from "./Socials";
function Main(props) {
  const socialMedia = [
    {
      link: "https://www.linkedin.com/in/",
      icon: "linkedin"
    },
    {
      link: "https://github.com/",
      icon: "github"
    },
    {
      link: "https://www.youtube.com/",
      icon: "youtube"
    },
    {
      link:
        "mailto:example@ex.co?subject=Felipe%20GD%20--%20Request%20To%20Contact",
      icon: "email"
    }
  ];

  return (
    <React.Fragment>
      <Helmet>
        <title>Felipe GD</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>
      <div className="container">
        <div clasName="row">
          {socialMedia.map((socials) => (
            <Socials
              getOpacity={null}
              getVisibility={null}
              link={socials.link}
              icon={socials.icon}
            />
          ))}
        </div>
      </div>
    </React.Fragment>
  );
}

export default Main;

Socials.jsx

import React, { useEffect, useRef } from "react";
import { SocialIcon } from "react-social-icons";

function Socials(props) {
  let size = useRef("20");

  useEffect(() => {
    if (window.innerWidth > 500) {
      size.current = 50;
    } else {
      size.current = 25;
    }
  }, [size]);

  return (
    <React.Fragment>
      <div className="col s1">
        <SocialIcon
          id={props.icon}
          bgColor="#2C2C2C"
          fgColor="#ECCECE"
          network={props.icon}
          url={props.link}
        />
      </div>
    </React.Fragment>
  );
}

export default Socials;

I know i could get this to work by not making it into a component but that doesent look clean to me, id like to be able to use the map function if possible.

materialize reactjs javascript
1 Answers

It looks like you are using Bootstrap library, however there is no dependency in package.json. It means you should install this dependency:

npm i react-bootstrap

After installing bootstrap, it is necessary to edit small typo:

<div clasName="row">

should be:

<div className="row">

Alternative way:

Another way is to create own style. An example can be seen at sandbox

So you can:

  1. Create "styles.css"

  2. create new class:

     .myRow {
     display: flex;
 }

  3. include in your component:

     import "./styles.css"

  4. apply style for your component:

     <div className="myRow" >
   {socialMedia.map((socials) => (
     <Socials
       getOpacity={null}
       getVisibility={null}
       link={socials.link}
       icon={socials.icon}
     />
   ))}
 </div>
user_16462400
Related