A
A
Alexander Show2020-10-15 13:47:16
typescript
Alexander Show, 2020-10-15 13:47:16

How to type hooks and pass it to a child?

This is the parent component

export const InputContainer:React.FC = (props) => {
    const classes = useStyles()
    const[open,setOpen] = useState<boolean>(false)

    return (
        <div className={classes.root}>
            <Collapse in={open}>
            <b>    <InputCard setOpen={setOpen}/></b>
            </Collapse>
            <Collapse in={!open}>
                <Paper
                    className={classes.addCard}
                    elevation={0}
                >
                    <Typography
                        onClick={() => setOpen(!open)}

                    > + Добавить</Typography>
                </Paper>
            </Collapse>

        </div>
    )
}


This is a child component of InputCard
export interface inputOpenType  {
    setOpen: any,
}



export const InputCard:React.FC<inputOpenType> = ({setOpen}) => {
    const classes = useStyles()

    return (
        <div>
            <div >
                <Paper className={classes.card} >
                    <InputBase
                        multiline
                        fullWidth
                        placeholder={'Добавить'}
                    />
                </Paper>
            </div>
            <div className={classes.btnBlock}>
                <Button
                    className={classes.btnSetting}
                    onClick={() => setOpen(false)} // НОРМАЛЬНАЯ ЛИ ПРАКТИКА?
                >Добавить</Button>
                <IconButton>
                    <ClearIcon  onClick={() => setOpen(false)}/>
                </IconButton>
            </div>
        </div>
    )
}


Tell me how to type setOpen which I want to pass to InputCard correctly?
And I is this a good practice? Does React violate the ideology?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
X
xenonhammer, 2020-10-16
@AlexShow163

Well this is what it will look like

export const InputCard:React.FC<{
  open: boolean
  setOpen: Dispatch<SetStateAction<boolean>>
}> = ({setOpen}) => {
    const classes = useStyles()

    return (

Well, or you cansetOpen: (arg0:boolean)=>void

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question