Fundamental reactivity
I must be missing something fundamental about how to implement that reactivity in SolidJS. I have a Card component (multiple for testing). That component includes some inputs with data that will be passed to child component (chart) which should trigger an update for that child component.
Parent Card(s) Component
Parent Card(s) Component
import { createSignal, createEffect } from 'solid-js'
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card'
import { TextField, TextFieldLabel, TextFieldRoot } from '@/components/ui/textfield'
import ProbabilityConesChart, { ConeType } from '@/components/charts/ProbabilityCones'
import type { Component } from 'solid-js'
import type { ProcessedData } from '@/libs/stats'
interface CardProps {
data: ProcessedData | null
}
export const ProbabilityConesCard: Component<CardProps> = (props) => {
const [coneSize, setConeSize] = createSignal(30)
// createEffect(() => {
// console.log('here', coneSize())
// })
return (
<div class="grid grid-cols-1 2xl:grid-cols-2 gap-6 mt-6">
<Card>
<CardHeader class="flex flex-row">
<CardTitle>Probability Cones</CardTitle>
<TextFieldRoot class="mt-0">
<TextFieldLabel for="coneSize">Cone Size</TextFieldLabel>
<TextField
id="coneSize"
class="mt-2"
type="number"
min={1}
value={coneSize()}
// onInput={(e) => setConeSize(Number((e.target as HTMLInputElement).value))}
onInput={(e) => {
console.log('here', coneSize())
setConeSize(Number((e.target as HTMLInputElement).value))
}}
/>
</TextFieldRoot>
</CardHeader>
<CardContent>
<ProbabilityConesChart
data={props.data}
coneLength={coneSize()}
/>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Probability Cones</CardTitle>
</CardHeader>
<CardContent>
<ProbabilityConesChart
data={props.data}
coneType={ConeType.Linear}
/>
</CardContent>
</Card>
</div>
)
}
export default ProbabilityConesCardimport { createSignal, createEffect } from 'solid-js'
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card'
import { TextField, TextFieldLabel, TextFieldRoot } from '@/components/ui/textfield'
import ProbabilityConesChart, { ConeType } from '@/components/charts/ProbabilityCones'
import type { Component } from 'solid-js'
import type { ProcessedData } from '@/libs/stats'
interface CardProps {
data: ProcessedData | null
}
export const ProbabilityConesCard: Component<CardProps> = (props) => {
const [coneSize, setConeSize] = createSignal(30)
// createEffect(() => {
// console.log('here', coneSize())
// })
return (
<div class="grid grid-cols-1 2xl:grid-cols-2 gap-6 mt-6">
<Card>
<CardHeader class="flex flex-row">
<CardTitle>Probability Cones</CardTitle>
<TextFieldRoot class="mt-0">
<TextFieldLabel for="coneSize">Cone Size</TextFieldLabel>
<TextField
id="coneSize"
class="mt-2"
type="number"
min={1}
value={coneSize()}
// onInput={(e) => setConeSize(Number((e.target as HTMLInputElement).value))}
onInput={(e) => {
console.log('here', coneSize())
setConeSize(Number((e.target as HTMLInputElement).value))
}}
/>
</TextFieldRoot>
</CardHeader>
<CardContent>
<ProbabilityConesChart
data={props.data}
coneLength={coneSize()}
/>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Probability Cones</CardTitle>
</CardHeader>
<CardContent>
<ProbabilityConesChart
data={props.data}
coneType={ConeType.Linear}
/>
</CardContent>
</Card>
</div>
)
}
export default ProbabilityConesCard
