通过单击作为道具传递的文本来渲染组件

Question

我是React的新手，正在尝试在用户单击某些文本时渲染组件。文本是使用表单输入和useState React钩子在父组件中更新的状态。我可以找到有关渲染'onClick'事件的文章，但这是一种类型为Submit或Button的表单，它只是文本，它是从上级状态作为道具传递给它的。另外，很多教程似乎已经过时了。我想做的是能够单击文本并使其呈现一个新的组件，从而使用户进入浏览器中的新“页面”。我希望能够单击的呈现文本是以下代码中的{user.contacts.username}。非常感谢您提供的帮助，因为我不确定该朝哪个方向前进。

import './Contacts.css';
import CreateTimer from './CreateTimer';


function Contacts(user) {
  return (
    <div className="Contacts">
      {user.contacts.username}
    </div>
  );
}

export default Contacts;