Kyros Posts - Answer Overflow

Kyros

•Created by Kyros on 11/13/2023 in #support

How to use async functions inside of synchronous components?

I tried await for a fetch inside my App component, but it went all wazoo and said promise is not valid JSX... I mean ofc but what do i do?

4 replies

SSolidJS

•Created by Kyros on 7/9/2023 in #support

How would you go about Font Awesome icons?

I’m new to Font Awesome and was trying to understand what the better way of using those was and it said that since I was using a JS framework I should go for the SVG + JS way but I had no clue on how that works, especially because there’s no Solid guide.

3 replies

SSolidJS

•Created by Kyros on 6/25/2023 in #support

Not sure whether I'm using reactivity right... (Codereview)

Ok so I recently ported my personal project to Solid coming from React, and while I did it I kind of translated anything React into it's Solid alternative, in this case something didn't quite work out. now, I actually got it to work but I'm not sure I'm doing it the right way and I definitely don't know what I'm doing, which is why I'm here. Here's the code, with an explanation below:

const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const location = useLocation();
  const pathname = createMemo(() => location.pathname);
  const [header, setHeader] = createSignal("Home");

  createEffect(() => {
    setHeader(PAGES[pathname() as Indexer])
  });


  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}

const PAGES = {
  "/": "Home",
  "/Library": "Library",
  "/Settings": "Settings",
  "/Downloads": "Downloads"
} as const

type Indexer = keyof typeof PAGES;

export default function Header(props: ParentProps) {
  const location = useLocation();
  const pathname = createMemo(() => location.pathname);
  const [header, setHeader] = createSignal("Home");

  createEffect(() => {
    setHeader(PAGES[pathname() as Indexer])
  });


  return (
    <div id="header" class={styles.wrapper}>
      <h1 class={styles.header} >
        {header()}
      </h1>
      {props.children}
    </div>
  )
}

15 replies

SSolidJS

•Created by Kyros on 6/21/2023 in #support

Add props to an element programmatically

In one of my components, I pass an element as a prop, although I'd like to add the class argument to it in order to style it.

import styles from "./css/MyElement.module.css";

interface Props {
  src: JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src} // props.src.addAttribute("class", {styles.my_class}) or smt would be nice, or anything that achieves the same result too
      </div>
    );
}

import styles from "./css/MyElement.module.css";

interface Props {
  src: JSX.Element;
}

export default function MyElement(props: Props) {
  return (
      <div class={styles.wrapper}>
          {props.src} // props.src.addAttribute("class", {styles.my_class}) or smt would be nice, or anything that achieves the same result too
      </div>
    );
}

7 replies

Gaming

Programming