Functional Component not receiving props in react

Question

So I am trying to pass post as a props to my Show component with help of onClick event which send that post to clickhandler and then that clickhandler send that post to Show component that i have created. But the problem is that clickhandler function is receiving the post correctly at console.log is working but the component is not receiving as there is only one console.log output on browser developer console.

Show component

import React from 'react';

const Show = ({post}) => {
   
    console.log(post);
   
        return (
        <div>
            {post}
        </div>
    ) 
    
    
}

export default Show;

Post Component

import Show from './Show'

const Post =({post,setCurrentId}) => {
    
 ...  
 const  handleclick = (post ) => {
     
    console.log(post);

    <Show post={post} />

   }
    return(
     .....

        <Button  onClick={() =>  handleclick(post)} >Show Image</Button> 

     .....    
    );
}

what i am trying to achieve is that i want to show that particular post only from list of all post that are rendering.

Answer 1

This isn't quite the right paradigm for React. What you'll want to do is set some state to the post you click and then render the Show component by returning it if there is a post in state. This should start getting you therer, but your individual implementation will surely be slightly different.

import { useState } from "react";

const Post = ({post,setCurrentId}) => {
  const [post, setPost] = useState();

  const handleclick = (selected) => {
    setPost(selected);
  }

  if (post) {
    return <Show post={post} />;
  }

  return (
      .....
      <Button  onClick={() =>  handleclick(post)} >Show Image</Button> 
      .....    
  );
}

Answer 2

You can achieve this using state object and basic JS and CSS. Just create states in the constructor of the class Post that contains a flag (eg. isAvailable). If the button is clicked just turn the flag to true. Once the flag is true the Show component is visible with the post passed in the props.

import React from 'react';
import Show from './Show';

class Post extends React.Component {
    constructor(props){
        super(props);
        this.state = {isAvailable: false};
    }
    const handleClick = (post) => {
        this.setState({isAvailable: true});    
    }
    render()
    {
        if(this.state.isAvailable)
        {
            return {
                <div>
                    <Button onClick={() => {handleClick(post)}}>Show Image</Button>
                    <Show post={this.props.post} />
                </div>
            }
        }
        else
        {
            return {
                <Button onClick={() => {handleClick(this.props.post)}}>Show Image</Button>
            }
        }
    }
}