title: How to navigate to Detail View clicking in LazyColumn item with JetPack Compose?
body: <p>I am trying to create an app with JetPack Compose (first time) and I am having some problem with the navigation. The application has a bottomBar with 3 items that navigates to the selected screen.</p>
  <p>This works, the problem is when I try to access one of the items of a LazyColumn that is in one of the screens. I would like to navigate to another screen (Profile) where the data of the selected item is displayed but I can't find a way to do it. No matter how I try to do it, I always get this &quot;@Composable invocations can only happen from the context of a @Composable function&quot;.</p>
  <p>Could someone help me by explaining how to do it? What I want is to learn how and why, not just copy.</p>
  <p>Thanks</p>
  <p><strong>MainActivity</strong></p>
  <pre class="lang-kotlin prettyprint-override"><code>class MainActivity : ComponentActivity() {
  
      @ExperimentalFoundationApi
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
  
  
          setContent {
              val systemUiController = rememberSystemUiController()
  
              SideEffect {
                  systemUiController.setStatusBarColor(color = PrimaryDark)
              }
              AppTheme() {
  
  
                  MainScreen()
  
              }
  
          }
      }
  
      @ExperimentalFoundationApi
      @Composable
      fun MainScreen() {
          val navController = rememberNavController()
          val navigationItems = listOf(Obras, Talleres, Ajustes)
          Scaffold(bottomBar = {
              BottomNavigationBar(
                  navController = navController,
                  items = navigationItems
              )
          }) {
  
              NavigationHost(navController)
          }
      }
  } 
  </code></pre>
  <p><strong>NavigationHost.kt</strong></p>
  <pre class="lang-kotlin prettyprint-override"><code>@ExperimentalFoundationApi
  @Composable
  fun NavigationHost(navController: NavHostController) {
  
  
      NavHost(navController = navController, startDestination = Obras.route) {
          composable(Obras.route) {
              Pantalla1(navigateToProfile = { authorId -&gt;
                  navController.navigate(&quot;${Profile.route}/$authorId&quot;)
              })
  
          }
          composable(Talleres.route) {
              Pantalla2()
          }
  
          composable(Ajustes.route) {
              Pantalla3()
          }
  
          composable(
              Profile.route + &quot;/{authorId}&quot;,
              arguments = listOf(navArgument(&quot;authorId&quot;) { type = NavType.StringType })
          ) { backStackEntry -&gt;
              val authorId = backStackEntry.arguments!!.getString(&quot;authorId&quot;)!!
              Profile(authorId)
          }
  
      }
  }
  
  </code></pre>
  <p><strong>Pantalla1.kt</strong></p>
  <pre class="lang-kotlin prettyprint-override"><code>typealias AuthorId = String
  
  @ExperimentalCoroutinesApi
  @Composable
  fun Pantalla1(navigateToProfile: (AuthorId) -&gt; Unit) {
  
  
      Column(
          modifier = Modifier
              .fillMaxSize()
              .padding(
                  paddingValues = PaddingValues(
  
                      bottom = 50.dp
                  )
              ),
      ) {
  
          AutoresInfo(navigateToProfile)
      }
  
  }
  
  @OptIn(ExperimentalFoundationApi::class)
  @Composable
  fun AutoresInfo(navigateToProfile: (AuthorId) -&gt; Unit) {
      var autoresList by remember {
          mutableStateOf&lt;List&lt;Autor&gt;?&gt;(null)
      }
  
      JetFirestore(path = { collection(&quot;autores&quot;) },
          queryOnCollection = { orderBy(&quot;nombre&quot;, Query.Direction.ASCENDING) },
  
          onRealtimeCollectionFetch = { value, exception -&gt;
              autoresList = value.getListOfObjects()
          }) {
          autoresList?.let {
              val grouped = it.groupBy { it.nombre[0] }
              LazyColumn(
  
                  modifier = Modifier.fillMaxSize()
  
              ) {
  
  
                  grouped.forEach { (initial, autoresForInitial) -&gt;
                      stickyHeader {
                          StickyHeaderAutores(initial = initial.toString())
                      }
  
                      items(autoresForInitial, key = { autor -&gt; autor.nombre }) { autor -&gt;
                          Surface(modifier = Modifier.clickable { navigateToProfile(autor.nombre) }) {
                              @OptIn(coil.annotation.ExperimentalCoilApi::class)
                              AutorCard(autor)
                          }
  
  
                      }
                  }
  
  
              }
          } ?: Column(
              modifier = Modifier.fillMaxSize(),
              verticalArrangement = Arrangement.Center,
              horizontalAlignment = Alignment.CenterHorizontally
          ) {
              CircularProgressIndicator(
                  color = Color.Red,
                  modifier = Modifier
  
                      .size(50.dp)
  
              )
          }
  
      }
  
  
  }
  
  </code></pre>