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
TitleTitle component, but its kinda now what i'm looking for. Title.tsxTitle.tsximport { 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>
);
}ParentParentconst [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>
);
