React Functional Component - Styleguidist

Question

I am using Styleguidist but unfortunately it ignores everything inside my functional components e.g:

        /**
         * 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.

e.g:

/**
         * 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/