Hydration errors with inline JSX

const EyeIcon = (props: { show: boolean }) => {
    const closedEye = (<svg/>/*omitted for brevity*/</svg>);
    const openEye = (<svg/>/*omitted for brevity*/</svg>);
    return (<Show when={props.show} fallback={closedEye}>
        {openEye}
    </Show>)
};

const EyeIcon = (props: { show: boolean }) => {
    const closedEye = (<svg/>/*omitted for brevity*/</svg>);
    const openEye = (<svg/>/*omitted for brevity*/</svg>);
    return (<Show when={props.show} fallback={closedEye}>
        {openEye}
    </Show>)
};

This gives me a hydration error with Astro.

IF I extract the Open and Closed eye to their own components, it's all fine. Is this a bug, or am I misunderstanding something with regards to Solid (i.e. am I being React-Brained)?

SolidJS•2y ago•

1 reply

Nick

Hydration errors with inline JSX

const EyeIcon = (props: { show: boolean }) => {
    const closedEye = (<svg/>/*omitted for brevity*/</svg>);
    const openEye = (<svg/>/*omitted for brevity*/</svg>);
    return (<Show when={props.show} fallback={closedEye}>
        {openEye}
    </Show>)
};

const EyeIcon = (props: { show: boolean }) => {
    const closedEye = (<svg/>/*omitted for brevity*/</svg>);
    const openEye = (<svg/>/*omitted for brevity*/</svg>);
    return (<Show when={props.show} fallback={closedEye}>
        {openEye}
    </Show>)
};

Hydration errors with inline JSX

Similar Threads

Hydration errors with inline JSX

Similar Threads

Similar Threads

Similar Threads