I am creating a reactJS webapp that has many different functional components, each functional component has some props and it is hard to keep track of what each functions takes in as props. Is there a way to suggest props in the compiler?
I've tried searching this issue to no avail
this is an example code
// creating a custom functional components
import React from "react";
import "./FadedText.scss";
export default function FadedText(props) {
return <p className="fadedText">{props.text ?? "Faded text"}</p>;
}
and inside another file I want to
import React from "react"
import FadedText from "./FadedText"
function SomeName()=>
{
// Suggests a prop called text inside of FadedText for it to be given a value when I click
// Ctrl+space
return <FadedText >;
}
So when I import them the props names are suggested by the compiler. Is there a way to achieve this?
Try this below code in child component
const {useCallback, useEffect} = React;
const handleKeyPress = useCallback((event) => {
console.log(`Key pressed: ${event.key}`);
console.log(props)
}, []);
useEffect(() => {
// attach the event listener
document.addEventListener('keyup', handleKeyPress);
}, [handleKeyPress]);
For control and space you may have to write logic like to store first key up of value and second key up of value... When both first and second is sequential to met ctrl + space you can trigger console.log(props)