onClick() in LazyColumn

Question

I am trying to set onClick() in IconButton like this

IconButton(onClick = {
                    navController?.navigate(NavigationScreen.Search.route)

                }) {

                    Icon(
                        painter = painterResource(id = R.drawable.hamburger_setting),
                        "UserTweetSetting",
                        modifier = Modifier
                            .size(12.dp)
                            .align(Alignment.CenterVertically),
                        tint = Color.DarkGray
                    )
                }
}

I call the TweetContentCardRecyclerView() funtion in Home(). For that reason, onClick() where i set in IconButton is not working. Can i set onClick() in another way in TweetContentCard() so that it can work or I have to set onClick() in TweetContentCardRecyclerView() ? sorry for my poor english

@Composable
fun Home(navController: NavHostController? = null) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
    ) {
        TweetContentCardRecyclerView()
    }
}



@Composable
fun TweetContentCard(
    navController: NavHostController? = null,
    userProfilePicture: Int = 0,
    userFullName: String = "",
    userName: String = "",
    tweetTime: String = "",
    tweetTextContent: String = "",
    tweetImageContent: Int = 0,
    totalComment: String = "",
    totalReTweet: String = "",
    totalLike: String = ""
) {

    Spacer(modifier = Modifier.height(10.dp))

    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 10.dp, end = 10.dp)
            .widthIn(min = 20.dp, max = 500.dp)
            .background(MaterialTheme.colors.background)
    ) {


        Row(modifier = Modifier.padding(top = 5.dp)) {

            // User Profile Picture
            SetImage(
                image = userProfilePicture,
                height = 50,
                width = 50,
                roundCorner = 50
            )
            Spacer(modifier = Modifier.width(10.dp))

            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                // User Full Name
                SetText(text = "$userFullName ", weight = FontWeight.Medium)
                SetText(
                    text = "@",
                    weight = FontWeight.Light,
                    size = 11,
                    color = Color.DarkGray,
                    bottomPadding = 2

                )
                // UserName
                SetText(
                    text = userName,
                    weight = FontWeight.Light,
                    size = 13,
                    color = Color.DarkGray,
                    bottomPadding = 2
                )
                SetText(
                    text = " * ",
                    weight = FontWeight.ExtraLight,
                    size = 10
                )
                // Tweet Post Time
                SetText(
                    text = tweetTime,
                    weight = FontWeight.Light,
                    size = 11,
                    color = Color.DarkGray,
                    bottomPadding = 2
                )

                Spacer(modifier = Modifier.width(40.dp))


                **If user click this, he should to the Search Screen**
                IconButton(onClick = {
                    navController?.navigate(NavigationScreen.Search.route)

                }) {

                    Icon(
                        painter = painterResource(id = R.drawable.hamburger_setting),
                        "UserTweetSetting",
                        modifier = Modifier
                            .size(12.dp)
                            .align(Alignment.CenterVertically),
                        tint = Color.DarkGray
                    )
                }

            }
        }

        Column(modifier = Modifier.padding(top = 5.dp)) {

            if (tweetTextContent.isNotEmpty() and (tweetImageContent != 0)) {
                TweetText(tweetTextContent)
                TweetImage(tweetImageContent)
            } else if (tweetTextContent.isNotEmpty() and (tweetImageContent == 0))
                TweetText(tweetTextContent)
            else
                TweetImage(tweetImageContent)

            Row(modifier = Modifier.padding(top = 5.dp)) {

                TweetReactionItem(
                    icon = R.drawable.tweet_comment,
                    contentDesc = "Comment",
                    text = totalComment
                )
                TweetReactionItem(
                    icon = R.drawable.retweet,
                    contentDesc = "Retweet",
                    text = totalReTweet
                )
                TweetReactionItem(
                    icon = R.drawable.tweet_like,
                    contentDesc = "Like",
                    text = totalLike
                )

            }
            Spacer(modifier = Modifier.height(10.dp))
            Divider(color = Color.Gray, thickness = 0.2.dp)

        }

    }
}



@Composable
fun TweetContentCardRecyclerView() {

    val tweetContent = remember { DataProvider.tweetContent }

    LazyColumn {
        items(tweetContent) { content ->
            TweetContentCard(
                userProfilePicture = content.userProfilePicture,
                userFullName = content.userFullName,
                userName = content.userName,
                tweetTime = content.tweetTime,
                tweetTextContent = content.tweetTextContent,
                tweetImageContent = content.tweetImageContent,
                totalComment = content.totalComment,
                totalReTweet = content.totalReTweet,
                totalLike = content.totalLike
            )
        }
    }
}

Answer 1

you've defined navController arg optional and you don't pass it to TweetContentCard(). As a result it's null and because of your null check before navigate (navController?.) it doesn't be executed at all.

fun TweetContentCard(
    navController: NavHostController? = null,// OPTIONAL

It can be solved by passing navController:

fun TweetContentCardRecyclerView(navController:NavHostController) {

 LazyColumn {
        items(tweetContent) { content ->
            TweetContentCard(
                navController = navController,
                userProfilePicture = content.userProfilePicture,
                userFullName = content.userFullName,
....

But it's good practice to pass the onClick as lambda to your item. No need to pass navController

@Composable
fun TweetContentCard(
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
  ...
) {
...
IconButton(onClick = { onClick() }) {
...