React Functional Component - Styleguidist

Question

I am using Styleguidist but unfortunately it ignores everything inside my functional components eg:

        /**
         * Displays a pageable list of projects or a single (detailed) project if an ID is given via the router.
         *
         * @version 1.0.0
         * @author Django
         */
        function Projects() {
            let {id} = useParams<{ id: string }>()
        
        
            /**
             * Insert text at cursor position.
             *
             * @param {React.ChangeEvent<HTMLInputElement>} event
             * @public
             */
            const handleLocationFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
                setLocationFilter((event.target as HTMLInputElement).value)
            };
    }

export default Projects

this will just show the first comment block, but the inner function will be ignored. Basically every comment inside the function got ignored. Any idea what I miss?

Answer 1

you can use displayName.

eg:

 /** * Displays a pageable list of projects or a single (detailed) project if an ID is given via the router. * * @version 1.0.0 * @author Django */ const Projects = () => { let {id} = useParams<{ id: string }>() /** * Insert text at cursor position. * * @param {React.ChangeEvent<HTMLInputElement>} event * @public */ const handleLocationFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => { setLocationFilter((event.target as HTMLInputElement).value) }; } Projects.displayName = 'Projects'; export default Projects

see more: https://react-styleguidist.js.org/docs/components/