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>
);
3 replies