Re-rendering component - second render doesn't include slice mocked data

Developing with Prismic
1

Hey there, I have some pretty simple code when trying to preview a slice within slice machine - and it seems as though there's a second render coming in and kind of clearing props.

Code:

import React from 'react'

const GoDownTo = ({ slice }) => {
    console.log(`slice`, slice);
    if(slice?.primary?.elementID) {
        return <GoDownTo id={slice.primary.elementID}/>
    }
    return <p>failed?</p>;
}

export default GoDownTo

image
image1303×172 20.2 KB

This I feel is pretty understandably blocking me from doing anything here.

Stock nextjs project.

How do I go about debugging this?

2

Notably, when debugging out the state, that doesn't seem to change.

const SliceSimulatorPage = () => {
    useEffect(() => {
        console.log('state updated', state);
    }, [state]);
    return (<SliceSimulator
        // The "sliceZone" prop should be a function receiving slices and rendering them using your "SliceZone" component.
        sliceZone={(props) => <SliceZone {...props} components={components}/>}
        state={state}
    />);
}

image
image962×163 22.1 KB

4

Hello @Acen, thanks for reaching out.

Previewing Slices is possible thanks to the Slice Simulator:

This functionality is part of the Slice Machine interface and is created by taking screenshots of your components with the mock data of each field. It is not necessary to modify anything within the code to run a slice simulation. Can you tell me more details about what you are trying to do here?

5

Hey there @Pau

I'm trying to preview the slice.

When I go to preview the slice, it's for whatever reason rerendering the component but with zero props.
So, the code example from the first post, shows just a <p>failed?</p> tag where the slice should be.

6

Can you show me a screenshot or screen recording of how you're previewing the Slice? Slice Machine gives you a set of steps to set up the Slice Simulator so that you don't run into any errors.