edison-js / Edison

💡Edison can controll microcomputer with TypeScript and React💡
https://edison-js-document.vercel.app/
MIT License
45 stars 6 forks source link

Add error handling to components other than parent and child #84

Open AllenShintani opened 3 months ago

AllenShintani commented 3 months ago
import React from 'react'
import { useState } from 'react'
import { Board } from '../utils/Board'
import { render } from '../rendere/render'
import { Button } from '../components/input/Button'
import { Led } from '../components/output/Led'

const App: React.FC = () => {
  const [isOn, setIsOn] = useState(false)
  const [isOn1, setIsOn1] = useState(false)

  return (
    <Board port={'/dev/ttyUSB0'}>
      <Button
        pin={8}
        triggered={() => setIsOn(true)}
        untriggered={() => setIsOn(false)}
      >
        <Led
          pin={13}
          isOn={isOn}
        />
      </Button>
      <Button
        pin={12}
        triggered={() => setIsOn1(true)}
        untriggered={() => setIsOn1(false)}
      >
        <Led
          pin={4}
          isOn={isOn1}
        />
      </Button>
    </Board>
  )
}
render(<App />)

Error handling for the above code that can manipulate relationships other than parent-child if setIsOn and setIsOn1 of triggered are swapped. if change the handle "isOn" and "isOn1" state, you can controll led state other than parent and child components.