I have embarked on creating a messaging app similar to WhatsApp.
To display the profile picture, I designed a card component that is accessible from a top bar component.
function DisplayPicture(prop){
return(
<div id="box">
<div id="dp">
<img src={prop.image}></img>
</div>
<div id="buttons">
<div className="buttons_dp">
<FontAwesomeIcon className="ico" fontSize="1.5em" color="white" icon={faMessage} />
</div>
</div>
)
}
export default DisplayPicture;
This is how the top bar component looks:
function TopBar(prop){
const [displayPicture, setDisplayPicture] = useState(false);
function toggleDisplayPicture(){
setDisplayPicture(!displayPicture);
console.log(displayPicture);
}
return(
<>
<div id="bar_container">
<div id="bar_left">
<FontAwesomeIcon fontSize="1.2em" color="#ebebeb" icon={faArrowLeftLong} className="icon"/>
<div id="profile_picture" onClick={toggleDisplayPicture}>
<img src={prop.image}></img>
</div>
</div>
<div id="bar_middle">{prop.name}</div>
<div id="bar_right">
<FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faVideoCamera} className="icon"/>
<FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faPhone} className="icon"/>
<FontAwesomeIcon fontSize="1.1em" color="#ebebeb" icon={faCog} className="icon"/>
</div>
</div>
<div id="dp_card" style={{display: displayPicture? "flex": "none"}}>
<DisplayPicture image = {profile_picture} />
</div>
</>
)
}
export default TopBar;
In the above setup, when clicking on the profile picture in the top bar component, it will display the dp_card component.
Now, when the dp_card component is displayed, I want the buttons within the dp_card to trigger an action inside the top bar component (specifically, hiding the dp_card when clicked).
So, my goal is to access the onClick event of a button in the DisplayPicture component from the TopBar component.
How can I achieve this functionality? Any guidance on this aspect would be greatly appreciated!
https://i.sstatic.net/EPLO7nZP.png
In the provided image showcasing the dp_card component, I aim to interact with the message button (leftmost) to hide the dp_card (setting its display to "none").
I am encountering difficulty in utilizing an onClick event from one component within another component.