Switch image to text onClick in React.js

Question

I've searched for similar questions but I cannot understand what I'm doing wrong.

I am trying to switch from a photo to a text onClick, so that when I click on the photo the text shows, instead of the image. But when I click on the photo I get the error: "setToggleImage is not a function" .

I am almost certain I am missing something out but I cannot see it. Here is the code, any help before I go crazy it is greatly appreciated:

import React, { useState } from 'react';
import Image from 'react-bootstrap/Image';
import profilePhoto from '../images/_MG_9807.JPG';

const contactInfo = {
    title: 'Contact: ',
    email: 'email: xxx@gmail.com',
    Github:  ' Github: ', 
    linkedin: 'linkedin: ',
};

const ImageContactDetails = () => {
    const [ toggleImage, setToggleImage ] = useState(true);

    return (
        <div>
            <div className='imageContactDetails' onClick={() => setToggleImage(!toggleImage)} > 
                { toggleImage ? <Image id='imageDetails' src={profilePhoto}   alt='professionalprofile' /> : 
                <div>   
                    <h4> {contactInfo.title} </h4>
                    <h5> {contactInfo.email} </h5>
                    <h5> {contactInfo.Github} </h5>
                    <h5> {contactInfo.linkedin} </h5>
                </div>   
                }
            </div>
            <div id='contactInfo'></div>
        </div>
    )
}
export default ImageContactDetails;

Answer 1

useState() returns a pair of values in an array, so you should use array destructuring. It should be:

const [toggleImage, setToggleImage] = useState(true);