Parallel mobX store

[FanManutd]

Hi! An example from the documentation:

import {observer} from 'mobx-react-lite'
import {createContext, useContext} from "react"

const TimerContext = createContext<Timer>()

const TimerView = observer(() => {
    // Grab the timer from the context.
    const timer = useContext(TimerContext) // See the Timer definition above.
    return (
        <span>Seconds passed: {timer.secondsPassed}</span>
    )
})

ReactDOM.render(
    <TimerContext.Provider value={new Timer()}>
        <TimerView />
        <TimerView />
        <TimerView />
    </TimerContext.Provider>,
    document.body
)

I want each <Timer View /> component to have its own Timer mobx store(or own state) and its state to be independent of the other <Timer View /> and Timer.

You have to understand that <Timer View /> and Timer can be a big component with a lot of logic.

It would be great if the number of <Timer View /> could be dynamic or at least generated once.

Any ideas? Is it possible?

[urugator]

Eg.

const TimerView = observer(({ id }) => {
    // Grab the timer from the context.
    const timer = useContext(TimersContext).get(id)
    return (
        <span>Seconds passed: {timer.secondsPassed}</span>
    )
})

ReactDOM.render(
  <TimersContext.Provider value={new Timers()}>
    <TimerView id="timer1" />
    <TimerView id="timer2" />
    <TimerView id="timer3" />
  </TimersContext.Provider>,
  document.body
)

[FanManutd]

Hm, what do you mean by Timers and get method? Can you detail please?

The same example from the documentation

class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increaseTimer() {
        this.secondsPassed += 1
    }
}

[urugator]

Just a class that manages multiple timers

[kubk]

Another example with useState:

const TimerView = observer(() => {
    const [timer] = useState(() => new TimerStore())
    return (
        <span>Seconds passed: {timer.secondsPassed}</span>
    )
})