S
SolidJS•2d ago
Grafik

Passing signal value as a prop

Hey, I just started learning solid today and I'm already having some troubles with it. I'm trying to create a quick project overview carousel, but for some reason, title won't update. The only thing that "somehow" worked, was to call signal getter inside Title component, but its kinda now what i'm looking for. Title.tsx 
import { JSX } from 'solid-js';
import styles from '../title/Title.module.css';
import { Dynamic } from 'solid-js/web';

export default function Title({
    element,
    children,
}: {
    element: keyof JSX.IntrinsicElements;
    children: any;
}) {
    return (
        <Dynamic component={element}>
            {children}
        </Dynamic>
    );
}
import { JSX } from 'solid-js';
import styles from '../title/Title.module.css';
import { Dynamic } from 'solid-js/web';

export default function Title({
    element,
    children,
}: {
    element: keyof JSX.IntrinsicElements;
    children: any;
}) {
    return (
        <Dynamic component={element}>
            {children}
        </Dynamic>
    );
}
Parent 
const [project, setProject] = createSignal(0);

    onMount(() => {
        const interval = setInterval(() => {
            setProject((value) => (projects.length - 1 === value ? 0 : value + 1));
        }, 1000);
        return () => clearInterval(interval);
    });

    return (
        <section id='projects' class={styles.projects}>
            <Title color='primary' size='large' element='h3'>
                My Projects
            </Title>
            <div class={styles.list}>
                <ArrowLeft />
                <div class={styles.project_container}>
                    <img src={projects[project()].image} />
                    <div class={styles.hr}>
                        <hr />
                    </div>
                    <div class={styles.project_description}>
                        <Title color='primary' size='small' element='h4'>
                            {projects[project()].name}
                        </Title>
                        <p class={styles.paragraph}>{projects[project()].description}</p>
                    </div>
                </div>
                <ArrowRight />
            </div>
        </section>
    );
const [project, setProject] = createSignal(0);

    onMount(() => {
        const interval = setInterval(() => {
            setProject((value) => (projects.length - 1 === value ? 0 : value + 1));
        }, 1000);
        return () => clearInterval(interval);
    });

    return (
        <section id='projects' class={styles.projects}>
            <Title color='primary' size='large' element='h3'>
                My Projects
            </Title>
            <div class={styles.list}>
                <ArrowLeft />
                <div class={styles.project_container}>
                    <img src={projects[project()].image} />
                    <div class={styles.hr}>
                        <hr />
                    </div>
                    <div class={styles.project_description}>
                        <Title color='primary' size='small' element='h4'>
                            {projects[project()].name}
                        </Title>
                        <p class={styles.paragraph}>{projects[project()].description}</p>
                    </div>
                </div>
                <ArrowRight />
            </div>
        </section>
    );
2 Replies
REEEEE
REEEEE•2d ago
Don't destructure props.
Grafik
GrafikOP•2d ago
oh- well. fair enough. It's working now. Thanks man ❤️

Did you find this page helpful?