Utiliser onClick

Pour ce challenge, j'ai utilisé  un event OnClick.

Est ce une bonne solution ?  sinon pourquoi ? 

import DisplayedArticle from "./DisplayedArtitcle/DisplayedArticle";
import classes from "./Displayed.module.css"
import { useNavigate } from "react-router-dom";



const DisplayedArticles = (props) => {   

    const navigate = useNavigate()

    // methodes

    const showArticleHandler = (slug) => {        
        navigate("/articles/" + slug)
    }


    let articles = (
        props.articles.map(article =>(
            <>
                <DisplayedArticle key={article.id} article= {article} clic={()=>showArticleHandler(article.slug)} />
            </>
        )))  

    return ( 
        <section className={[classes.DisplayedArticles,"container"].join(" ")}>        
           {articles}
        </section>
    );
}
 
export default DisplayedArticles;