React JS auto complete functions

Question

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?

Answer 1

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)