Rename Component with Layout in the docs

[Devessier]

I renamed a property in the docs and fixed the example.

I saw that a state without children can't define it's component with Layout. It will render nothing:

const Count = createMachineComponent<CountMachine>({
  states: {
    a: {
      Layout: ({ actorRef }) => (
        <div className="card">
          <button onClick={() => actorRef.send({ type: "start" })}>
            Start
          </button>
        </div>
      ),
    },
  },
})

I also saw that the rules of hook ESLint's plugin doesn't like defining components with arrow functions like so. This is now a recommended ESLint rule, so I'm wondering if it wouldn't trigger an error for most developers who could use this library. We might want to document the problem and suggest a workaround.

[xylophonehero]

Thanks for the example and docs fixes!

Indeed we initially allowed the rendered component to be passed in the Component: property but now we only allow a function component there.

[xylophonehero]

Thats a good point on the eslint one. I don't want to force users to have to use capitol letters for state names indeed (in v4 most of the example states used camelCase and this is the same for the webinar geek repo)

It is something we can do theoretically typescript wise and javascript wise to capitalise all the machine component states but I don't particularly like it as we are writing extra code to appease a linter and it would be confusing why all states are now capitalised in the object

So my two suggestions are:

• Possibly bring back the Component: way of doing things (this starts with a capitol letter so it passes the lint rules)
• Suggest they break out their anonymous component into a named component if they plan to use hooks

What would you suggest here as a user?

[xylophonehero]

I saw that a state without children can't define it's component with Layout. It will render nothing

When using the Layout without states, you should get a type error. So the fix would be to just make the value of the state the function without the extra Layout: object wrapping it