how to add function call into JSX

I have a component setup like

<GameRoot>
  <Zone id="players" />
  <Zone id="battlefield" />
  <Zone id="info" />
</GameRoot>

<GameRoot>
  <Zone id="players" />
  <Zone id="battlefield" />
  <Zone id="info" />
</GameRoot>

where GameRoot is a context provider that sets up a game state and stores a list of card ids for each zone. For testing purposes I want to load some initial cards into the state. Can I put a function call to my setState function in the JSX? I've tried a couple things that felt intuitive to me but am not figuring it out. I could pass some initial state into the GameRoot component with props but that isn't how I want to implement it in the end so I would rather not

2 Replies

REEEEE•2y ago

What do you mean by adding a functionCall to setState in the JSX? you could do it in onMount, or if the data is already static and ready to go you could just pass it in to the signal/store

const [state, setState] = createStore(initialState)

const [state, setState] = createStore(initialState)

jesseb34rOP•2y ago

I guess I meant I wanted to do something like

<GameRoot>
  {useGameContext()[1].addCard(cardId, toZone)}
  <Zone id="players" />
  <Zone id="battlefield" />
  <Zone id="info" />
</GameRoot>

<GameRoot>
  {useGameContext()[1].addCard(cardId, toZone)}
  <Zone id="players" />
  <Zone id="battlefield" />
  <Zone id="info" />
</GameRoot>

but this errors because JSX is expecting me to return a component but yeah, I guess it does work better just to go do this in the initial createStore call

Gaming

Programming

how to add function call into JSX