How can I push ref prop to the child component? I get an error:
'{ reference: RefObject<HTMLSelectElement>; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
Property 'reference' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
I know it is something about React.FC<> and the generic function but I have no idea what type is it, what should I write between <> to work with refs pushed from another component.
*EDIT: I know I can use forwardRef but the point of this question is how can I pass ref using props.
const typeRef = useRef<HTMLSelectElement>(null)
const descriptionRef = useRef<HTMLTextAreaElement>(null)
const onSubmitHandler = (e: React.FormEvent): void => {
e.preventDefault()
}
return (
<React.Fragment>
<Navbar />
<Center width="100%" height="95vh">
<Flex justifyContent="center" alignItems="center" width="50vw">
<FormControl textAlign="center" onSubmit={onSubmitHandler}>
<Input ref={titleRef} placeholder="Name for your recipe" />
<SelectType reference={typeRef} />
<Textarea ref={descriptionRef} placeholder="Description" cols={COLS} rows={ROWS} resize="none" />
<Button type="submit">Submit</Button>
</FormControl>
</Flex>
</Center>
</React.Fragment>
)
}
child:
import { Select } from "@chakra-ui/react"
const SelectType: React.FC<> = (props) => {
return (
<Select ref={props.refProp}>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
<option>Supper</option>
</Select>
)
}
export default SelectType
You simply need to define the prop types for your SelectType component.
const SelectType: React.FC<{ refProp: React.RefObject<HTMLSelectElement> }> = (props) => { ...
In order to pass down a ref to a child component the technique called Forwarding Refs could be used which would help in this scenario, see from the documentation:
Ref forwarding is a technique for automatically passing a ref through a component to one of its children.
Changing from reference to ref to pass down typeRef as:
<SelectType ref={typeRef} />
Then finally within the <SelectType /> component using forwardRef as:
const SelectType = React.forwardRef((_, ref) => {
return (
<Select ref={ref}>
<option>Breakfast</option>
<option>Lunch</option>
<option>Dinner</option>
<option>Supper</option>
</Select>
)
})
In this way you don't need to add any type for props.